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

/* ==================================================================
   PSD 移动端拆分图层实现（最终版）
   每个可见元素均来自对应 PSD 的独立图层；只有正文卡片内部滚动，
   根页面固定一屏且不显示滚动条。
   ================================================================== */

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .m-layer-page {
    display: block !important;
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #061a3f;
  }

  .m-layer-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
  }

  .m-layer-fixed {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .m-layer-logo {
    z-index: 2;
  }

  .m-layer-panel {
    z-index: 1;
  }

  .m-layer-title-shadow {
    z-index: 2;
  }

  .m-layer-title {
    z-index: 3;
  }

  .m-layer-content-scroll {
    position: absolute;
    left: 10.8%;
    top: 25.5%;
    width: 78.4%;
    height: 59%;
    z-index: 4;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .m-layer-content-scroll::-webkit-scrollbar {
    display: none;
  }

  /* track/state 重建的是"整张画布"坐标系。这里必须用容器查询单位
     cqw/cqh（相对锁定比例的画布），不能用 vw/dvh（相对手机屏幕）：
     屏幕比例和 430:932 画布不一致时，vw/dvh 的横纵缩放倍数不同，
     内容层就会错位、文字按钮被拉伸压扁——这是客户反馈"变形"的根因 */
  .m-layer-track {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100cqw;
    min-height: 100cqh;
  }

  .m-layer-state {
    position: relative;
    flex: 0 0 100cqh;
    width: 100cqw;
    height: 100cqh;
    min-height: 100cqh;
    margin-left: -10.8cqw;
    transform: translateY(-25.5cqh);
  }

  .m-layer-content-layer {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .m-layer-tabbar {
    z-index: 6;
  }

  .m-layer-bottom {
    z-index: 7;
  }

  .m-layer-hit-nav {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  .m-layer-hit-nav a {
    position: absolute;
    display: block;
    pointer-events: auto;
    background: transparent;
  }

  .m-layer-hit-nav a:nth-child(1) {
    left: 7.105%;
    top: 93.140%;
    width: 12.332%;
    height: 3.430%;
  }

  .m-layer-hit-nav a:nth-child(2) {
    left: 24.531%;
    top: 93.140%;
    width: 12.868%;
    height: 3.430%;
  }

  .m-layer-hit-nav a:nth-child(3) {
    left: 62.701%;
    top: 93.140%;
    width: 12.801%;
    height: 3.430%;
  }

  .m-layer-hit-nav a:nth-child(4) {
    left: 78.686%;
    top: 93.140%;
    width: 12.601%;
    height: 3.430%;
  }

  .m-layer-hit-nav a.register {
    left: 31.971%;
    top: 85.136%;
    width: 34.920%;
    height: 17.305%;
  }

  .m-v1 > .m-v1-background,
  .m-v1 > .m-v1-art,
  .m-v1 > .m-v1-organizers {
    display: block;
  }

  .m-v1 .m-tabbar-items {
    z-index: 4;
  }

  /* 报名页：PSD 图层独立绘制，真实表单控件作为透明交互层。 */
  .m-layer-register {
    display: block !important;
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #061a3f;
  }

  .m-layer-register > .register-header,
  .m-layer-register > .m-content-wrap {
    position: absolute;
    inset: 0;
    z-index: 8;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .m-layer-register > .register-header {
    display: none;
  }

  .m-layer-register > .m-content-wrap {
    display: block;
    background: transparent !important;
  }

  .m-layer-register .m-register-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
  }

  .m-layer-register .m-register-badge {
    display: none;
  }

  .m-layer-register .register-form {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
  }

  .m-layer-register .form-group {
    position: absolute;
    left: 24.8660%;
    width: 57.7748%;
    height: 3.28%;
    margin: 0;
    pointer-events: none;
  }

  .m-layer-register .form-group:nth-child(1) { top: 27.0705%; }
  .m-layer-register .form-group:nth-child(2) { top: 33.1891%; }
  .m-layer-register .form-group:nth-child(3) { top: 39.1533%; }
  .m-layer-register .form-group:nth-child(4) { top: 45.1174%; }
  .m-layer-register .form-group:nth-child(5) { top: 51.0507%; }
  .m-layer-register .form-group:nth-child(6) { top: 57.0766%; }
  .m-layer-register .form-group:nth-child(7) { top: 63.0408%; }

  .m-layer-register .form-group label {
    display: none;
  }

  .m-layer-register .form-group input[type="text"],
  .m-layer-register .form-group input[type="tel"],
  .m-layer-register .form-group .custom-select-trigger {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 8% 0 calc(12.2% - 3px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font-size: clamp(9px, 3.55cqw, 15px);
    line-height: 1;
    caret-color: #ffffff;
    pointer-events: auto;
  }

  .m-layer-register .form-group input::placeholder,
  .m-layer-register .custom-select-trigger .placeholder {
    color: transparent;
  }

  .m-layer-register .m-register-field-copy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-left: calc(12.2% - 3px);
    color: rgba(231, 238, 251, 0.95);
    font-size: clamp(9px, 3.55cqw, 15px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  .m-layer-register .m-register-file-copy {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    color: rgba(231, 238, 251, 0.95);
    font-size: clamp(9px, 3.55cqw, 15px);
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
  }

  .m-layer-register .m-register-file-label,
  .m-layer-register .m-register-file-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }

  .m-layer-register .m-register-file-label {
    left: calc(12.2% - 3px);
    letter-spacing: 0.04em;
  }

  .m-layer-register .m-register-file-hint {
    left: calc(52% - 3px);
    color: rgba(164, 175, 194, 0.95);
    font-size: clamp(7px, 3.1cqw, 13px);
  }

  .m-layer-register .form-group.has-value > .m-register-field-copy {
    visibility: hidden;
  }

  .m-layer-register .form-group input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
  }

  .m-layer-register .custom-select-options {
    z-index: 20;
    pointer-events: auto;
  }

  .m-layer-register .custom-select-options li {
    pointer-events: auto;
  }

  .m-layer-register:has(.custom-select-options.open) .m-register-psd-dropdown {
    display: none;
  }

  .m-layer-register .form-group:nth-child(n + 6),
  .m-layer-register .form-message {
    pointer-events: auto;
  }

  .m-layer-register .form-message {
    position: absolute;
    left: 20%;
    top: 75%;
    width: 60%;
    z-index: 13;
    min-height: 18px;
    color: #ffffff;
    pointer-events: none;
  }

  .m-layer-register .form-submit {
    position: absolute;
    left: 31.9705%;
    top: 85.1360%;
    z-index: 14;
    width: 34.9196%;
    height: 14.8640%;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: auto;
  }

  .m-register-psd-fields {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .m-register-psd-field,
  .m-register-psd-dropdown {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .m-register-field-copy,
  .m-register-file-copy {
    display: none;
  }

  .m-register-psd-dropdown {
    z-index: 2;
  }

  .m-register-psd-cta {
    position: absolute;
    left: 31.9705%;
    top: 85.1360%;
    z-index: 11;
    display: block;
    width: 34.9196%;
    height: 14.8640%;
    overflow: hidden;
    pointer-events: none;
  }

  .m-register-psd-cta img {
    display: block;
    width: 100%;
    height: 116.4200%;
    pointer-events: none;
  }

  .m-layer-register > .m-layer-tabbar {
    z-index: 6;
  }

  .m-register-psd-nav-label {
    z-index: 7;
  }
}

body {
  background: #f6f6f6;
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

/* 首页是等比缩放的整页画布，需要在高瘦屏幕上垂直居中；
   内页是正常文档流长页面，不能套用这条规则，否则会把 header/面包屑/正文/footer
   挤压成横向排列（flex 行方向）。用 :has() 精确限定只在首页生效。 */
body:has(.page) {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.page {
  flex-shrink: 0;
}

.page {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 1077;
  background: #f6f6f6;
  overflow: hidden;
  container-type: inline-size;
  container-name: page;
}

.el {
  position: absolute;
  display: block;
}

.el > img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ============ 位置坐标（由设计图 1920x1075 画布换算） ============ */

.hero-bg { left:0%; top:0%; width:100%; height:38.7187%; z-index: 1; }
.nav-bg { left:0%; top:0%; width:100%; height:5.3853%; z-index: 4; }
.footer-bg { left:0%; top:38.0687%; width:100%; height:61.9313%; z-index: 1; object-fit: cover; object-position: center bottom; }

.mascot { left:91.3021%; top:46.0539%; width:4.8958%; height:12.7205%; z-index: 4; }

.nav-active {
  top: 0%;
  height: 5.3853%;
  z-index: 5;
  left: 48.4896%;
  width: 3.8021%;
  border-radius: 4px;
  background: linear-gradient(to bottom, #0255bd, #0133b3);
  border-bottom: 2px solid #33deff;
  transition: left 0.28s ease, width 0.28s ease;
}
.hero-title { left: 31.25%; top: 12.5%; width: 37.5%; height: auto; z-index: 3; }

.header-logo { left:18.9583%; top:0.5571%; width:10.6771%; height:3.8997%; z-index: 6; }

.widget-title { left:90.7812%; top:61.0956%; width:4.7396%; height:4.364%; z-index: 4; }
.widget-bg { left:90.5729%; top:60.0743%; width:5.3646%; height:9.6565%; z-index: 3; }
.qr-box { left:90.5729%; top:73.0734%; width:5.3646%; height:9.6565%; z-index: 3; }

/* ============ 轮播海报（拟合原设计的圆角描边外框） ============ */

.carousel-v2 {
  left: 20%;
  top: 44.1%;
  width: 40.25%;
  height: 41.1%;
  z-index: 3;
  border: 7px solid #98baff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 8px 8px 6px 0px rgba(25, 70, 125, 0.18);
}

/* 外层蓝紫描边 + 内层青白细描边，统一覆盖全部五张轮播图。 */
.carousel-v2::after {
  position: absolute;
  inset: 0px;
  z-index: 4;
  border: 3px solid rgba(225, 252, 255, 0.96);
  border-radius: 15px;
  /* box-shadow: 0 0 0 3px rgba(96, 205, 255, 0.82); */
  content: "";
  pointer-events: none;
}

/* ============ 六宫格入口图标 ============ */

.grid-panel {
  left: 61.35%;
  top: 44.3%;
  width: 18.45%;
  height: 40.7%;
  z-index: 2;
  background: #ffffff;
  border: 2px solid #33deff;
  border-radius: 16px;
  box-shadow: 9px 7px 6px 0px rgba(25, 70, 125, 0.16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 注意：padding/gap 百分比对于绝对定位元素是按"包含块"(.page)的宽度换算的，
     不是按 .grid-panel 自己的宽度，所以这里不能用 %，必须用固定 px，
     否则会算出一个大到离谱的内边距，把六宫格挤压成一小团 */
  padding: min(0.83vw, 16px) min(0.73vw, 14px);
  gap: min(0.42vw, 8px) min(0.52vw, 10px);
}

.grid-hotspot {
  position: relative;
  z-index: 3;
  display: block;
  border-radius: 10px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.grid-hotspot:hover {
  background: rgba(51, 222, 255, 0.1);
  transform: translateY(-2px);
}

.grid-hotspot .grid-icon,
.grid-hotspot .grid-label {
  position: absolute;
  left: 0;
  pointer-events: none;
}

/* 每个热区内 icon 在上、label 药丸在下，比例按各自在设计稿中相对于热区框的位置换算 */
.grid-hotspot-1 .grid-icon, .grid-hotspot-2 .grid-icon,
.grid-hotspot-5 .grid-icon, .grid-hotspot-6 .grid-icon {
  top: 0%; height: 66.42%; left: 28.57%; width: 42.86%;
}
.grid-hotspot-3 .grid-icon, .grid-hotspot-4 .grid-icon {
  top: 0%; height: 61.62%; left: 28.57%; width: 42.86%;
}
.grid-hotspot .grid-label {
  bottom: 0%;
  height: 34.34%;
  width: 100%;
}


/* ============ 支持单位 ============ */

.support-badge { display: none; left: 19.8438%; top: 83.1941%; width: 60.8333%; height: 5.1068%; z-index: 2; }
.support-col { display: none; top: 89.0436%; width: 19.7396%; height: 5.4782%; z-index: 2; }
.support-col-1 { left: 19.8438%; }
.support-col-2 { left: 40.3907%; }
.support-col-3 { left: 60.9375%; }

/* ============ 顶部导航菜单（含悬停下拉子菜单，原图未单独导出） ============ */

.nav-menu {
  left: 49.7396%;
  top: 0%;
  width: 30.3646%;
  height: 5.3853%;
  z-index: 10;
}

.nav-menu ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.nav-menu > ul > li {
  margin-left: min(1.0417cqw, 20px);
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-menu > ul > li > a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: min(0.78cqw, 15px);
  letter-spacing: 1px;
  white-space: nowrap;
  padding: 0 6px;
  opacity: 0.94;
  transition: opacity 0.2s;
}

.nav-menu > ul > li > a:hover,
.nav-menu > ul > li.active > a {
  opacity: 1;
  font-weight: 600;
}

.nav-menu .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 10px 0 12px;
  min-width: 110px;
  text-align: center;
  background: linear-gradient(to bottom, #0255bd, #0133b3);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px rgba(1, 30, 90, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 20;
}

.nav-menu li:hover .dropdown,
.nav-menu li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-menu .dropdown li {
  padding: 6px 14px;
}

.nav-menu .dropdown a {
  color: #eaf4ff;
  text-decoration: none;
  font-size: min(0.68cqw, 13px);
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.2s, color 0.2s;
}

.nav-menu .dropdown a:hover {
  opacity: 1;
  color: #ffffff;
  font-weight: 600;
}

/* ============ 宣传海报轮播 ============ */

.poster-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.poster-slide {
  position: absolute;
  inset: 0;
  width: 103%;
  height: 103%;
  top: -2%;
  left: -1.5%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.poster-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.poster-slide.one {
  width: 110%;
  height: 110%;
  top: -4%;
  left: -5%;
}

.poster-dots {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.poster-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.poster-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.poster-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.poster-dot.active {
  background: #ffffff;
  transform: scale(1.2);
}

/* ============ 按钮 / 链接交互效果 ============ */

.el a.hotspot,
.grid-hotspot {
  cursor: pointer;
}

/* ============ 响应式：整页按 1920x1075 原始比例等比缩放至屏幕宽度 ============
   所有元素均使用百分比定位、容器查询单位(cqw)控制字号，
   因此图片与文字始终保持原设计的相对比例，不会出现错位；
   移动端允许双指缩放（未禁用 user-scalable），便于查看细节文字。 */

/* ==================================================================
   内页公共模板（面包屑 / 侧边栏 / 正文卡片 / 底部条）
   用于除首页以外的所有二级页面：报名页除外
   ================================================================== */

.site-header {
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 57;
  overflow: visible;
  container-type: inline-size;
  container-name: page;
}

.site-header .el {
  position: absolute;
}

/* 首页导航相关类原本按 1920x1075 整页高度换算百分比，
   这里 site-header 只有导航条自身高度，需要重新换算 top/height */
.site-header .nav-bg { top: 0%; height: 100%; }
.site-header .header-logo { top: 10.65%; height: 77.2%; }
.site-header .nav-active { top: 0%; height: 101.8%; }
.site-header .nav-menu { top: 0%; height: 100%; }

.breadcrumb {
  position: relative;
  z-index: 1;
  background: #f4f6fa;
  border-bottom: 1px solid #e6ebf3;
}

.breadcrumb-inner {
  max-width: min(53.4vw, 1025px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: min(1.25vw, 24px) 0;
}

.breadcrumb-inner img {
  width: min(1.1vw, 21px);
  height: auto;
  display: block;
}

.breadcrumb-inner span {
  font-size: min(0.85vw, 16px);
  color: #4a5568;
}

.breadcrumb-inner a {
  color: #4a5568;
  text-decoration: none;
}

.breadcrumb-inner a:hover {
  color: #1a56db;
}

.inner-main {
  position: relative;
  max-width: min(53.4vw, 1025px);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: min(1.6vw, 30px);
  padding: min(2.2vw, 42px) 0 min(4vw, 76px);
  min-height: 60vh;
}

/* 内页正文区底纹：铺满视口宽度（封顶画布宽1920px），
   上边界紧贴面包屑下方，下边界紧贴底部线条条（inner-footer-bar.png）上方，
   不覆盖二者，只作为侧边栏+正文卡片之间空隙里的装饰底图 */
.inner-main::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: min(100vw, 1920px);
  transform: translateX(-50%);
  background: #f6f6f6 url("/assets/optimized/inner-footer-bar-v2.ed9a8db2bedf.webp") no-repeat top center / cover;
  z-index: -1;
}

.sidebar {
  flex: 0 0 min(13.5vw, 259px);
  width: min(13.5vw, 259px);
}

.sidebar-badge {
  width: 100%;
  aspect-ratio: 241 / 82;
  background: url("/assets/optimized/sidebar-title-badge.a223423f48e7.webp") no-repeat center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: min(1.15vw, 22px);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: min(0.8vw, 15px);
}

.sidebar-list {
  width: 100%;
  aspect-ratio: 259 / 624;
  background: url("/assets/optimized/sidebar-list-box.24a53e86e421.webp") no-repeat center / 100% 100%;
  padding: min(2.2vw, 42px) 0 0;
  box-sizing: border-box;
}

.sidebar-list a {
  position: relative;
  display: block;
  padding: min(0.85vw, 16px) min(1.6vw, 30px);
  font-size: min(0.95vw, 18px);
  color: #333333;
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-list a:hover {
  color: #1a56db;
}

.sidebar-list a.active {
  background: url("/assets/optimized/sidebar-item-active.39ef01f093e0.webp") no-repeat left center / 100% 100%;
  color: #ffffff;
  font-weight: 600;
}

.sidebar-list a.active::after {
  content: ">";
  position: absolute;
  right: min(1.2vw, 22px);
  top: 50%;
  transform: translateY(-50%);
}

.content-card {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(38.3vw, 736px);
  background: #ffffff;
  border: 1px solid #dbe4f5;
  box-shadow: 0 2px 10px rgba(20, 60, 150, 0.06);
  /* 高度固定为左侧边栏（标题块+间距+列表框）的总高度，
     内容超出时在卡片内部滚动，卡片本身不随内容变高。
     37.92vw = 侧边栏宽13.5vw × (82/241 + 624/259) + 间距0.8vw，727px 为对应上限值 */
  height: min(37.92vw, 727px);
  display: flex;
  flex-direction: column;
}

.content-card-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.content-card-body::-webkit-scrollbar {
  width: 6px;
}

.content-card-body::-webkit-scrollbar-thumb {
  background: #c5d3ea;
  border-radius: 3px;
}

.content-card-body::-webkit-scrollbar-track {
  background: transparent;
}

.content-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: min(0.85vw, 16px) min(1.25vw, 24px);
  font-size: min(0.8vw, 15px);
  color: #6b7280;
}

.content-card-head::before {
  content: "";
  width: 3px;
  height: 1em;
  background: #2fc5f8;
  flex-shrink: 0;
}

.content-card-divider {
  height: 2px;
  background: linear-gradient(to right, #2fc5f8, #b0bdee);
}

.content-card-body {
  padding: min(2.2vw, 42px) min(2.6vw, 50px) min(3.1vw, 60px);
}

.content-card-body h1 {
  text-align: center;
  font-size: min(1.35vw, 26px);
  color: #1a2b4c;
  margin-bottom: min(1.6vw, 30px);
  line-height: 1.5;
}

.content-card-body p {
  font-size: min(0.85vw, 16px);
  line-height: 2;
  color: #333333;
  text-indent: 2em;
  margin-bottom: min(0.3vw, 6px);
}

.content-card-body table {
  width: 100%;
  border-collapse: collapse;
  margin: min(1.2vw, 24px) 0;
  font-size: min(0.85vw, 16px);
}

.content-card-body table th,
.content-card-body table td {
  border: 1px solid #dbe4f5;
  padding: min(0.55vw, 10px) min(0.7vw, 14px);
  text-align: center;
  color: #333333;
}

.content-card-body table th {
  background: #eef4fd;
  color: #1a2b4c;
}

.content-card-body .no-content {
  text-align: center;
  color: #9aa5b1;
  padding: min(2.6vw, 50px) 0;
  font-size: min(0.85vw, 16px);
}

.inner-footer {
  width: 100%;
  display: block;
}

.inner-footer img {
  width: 100%;
  height: auto;
  display: block;
}

/* 联系我们页：无侧边栏 */
.contact-card {
  max-width: min(59vw, 1136px);
  margin: 0 auto;
}

.contact-field {
  display: flex;
  align-items: baseline;
  gap: min(1vw, 18px);
  padding: min(1.3vw, 24px) 0;
  border-bottom: 1px dashed #e6ebf3;
}

.contact-field:last-child {
  border-bottom: none;
}

.contact-field .label {
  color: #22c55e;
  font-weight: 700;
  font-size: min(0.95vw, 18px);
  flex: 0 0 min(6vw, 110px);
}

.contact-field .value {
  color: #4a5568;
  font-size: min(0.9vw, 17px);
  overflow-wrap: anywhere;
}

.contact-field .value.empty {
  color: #b7c0cc;
  font-style: normal;
}

/* ==================================================================
   报名页 register.html
   ================================================================== */

.register-page {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  background: url("/assets/optimized/register-bg.ed9a8db2bedf.webp") no-repeat center top / cover;
  padding: min(3.5vw, 60px) min(4.5vw, 86px) min(6vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.register-header {
  display: flex;
  align-items: center;
  gap: min(1vw, 18px);
  margin-bottom: min(2.5vw, 46px);
}

.register-header img {
  width: min(4.5vw, 84px);
  height: auto;
  display: block;
}

.register-header h1 {
  color: #ffffff;
  font-size: min(1.9vw, 34px);
  font-weight: 700;
  letter-spacing: 1px;
}

.register-form {
  max-width: min(30vw, 570px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(10, 40, 110, 0.18);
  padding: min(2.4vw, 44px) min(2.6vw, 48px) min(2.8vw, 50px);
}

.form-group {
  margin-bottom: min(1.05vw, 20px);
}

.form-group label {
  display: none;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group select,
.form-group input[type="file"],
.form-group .custom-select-trigger {
  width: 100%;
  height: min(2.6vw, 48px);
  border: 1px solid #dbe0e8;
  border-radius: 6px;
  padding: 0 min(0.9vw, 16px);
  font-size: min(0.85vw, 16px);
  color: #333333;
  background: #ffffff;
  font-family: inherit;
}

.form-group input[type="file"] {
  padding: min(0.5vw, 9px) min(0.9vw, 16px);
  color: #9aa5b1;
}

.form-group select,
.form-group .custom-select-trigger {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%239aa5b1' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right min(0.7vw, 13px) center;
  background-size: min(1vw, 18px);
  cursor: pointer;
}

.form-group input::placeholder {
  color: #9aa5b1;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #2a6ee0;
}

/* ============ 自定义"报送类型"下拉：原生 select 展开列表在部分移动端
   浏览器里，处于自定义滚动容器内会出现定位错乱（浮在错误位置、盖住其它
   输入框），这是浏览器原生弹层的已知兼容性问题，CSS 无法控制其定位，
   所以改成完全自绘的下拉列表，定位、样式、层级都自己控制 */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: block;
  text-align: left;
  font: inherit;
}

.custom-select-trigger .placeholder {
  color: #9aa5b1;
}

.custom-select-trigger[aria-expanded="true"] {
  border-color: #2a6ee0;
}

/* 用 position:fixed（而不是 absolute）+ JS 算出的具体坐标来定位，
   这样列表展开在哪个可滚动的祖先容器里都不会被裁掉一部分，
   也不用担心和原生 select 弹层一样的定位错乱问题 */
.custom-select-options {
  position: fixed;
  z-index: 1000;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe0e8;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(10, 40, 110, 0.18);
  display: none;
}

.custom-select-options.open {
  display: block;
}

.custom-select-options li {
  padding: min(0.55vw, 10px) min(0.9vw, 16px);
  font-size: min(0.85vw, 16px);
  color: #333333;
  cursor: pointer;
}

.custom-select-options li:hover,
.custom-select-options li.selected {
  background: #eaf1ff;
  color: #1a56db;
  font-weight: 600;
}

.form-submit {
  width: 100%;
  height: min(2.9vw, 54px);
  margin-top: min(0.5vw, 10px);
  background: linear-gradient(to bottom, #3d6fe0, #2a4fc4);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: min(1vw, 19px);
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}

.form-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.form-submit:active {
  filter: brightness(0.95);
  transform: translateY(0);
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.form-message {
  min-height: min(1.2vw, 22px);
  font-size: min(0.8vw, 15px);
  text-align: center;
  margin-bottom: min(0.5vw, 10px);
}

.form-message.success {
  color: #1a9c4b;
}

.form-message.error {
  color: #d33;
}

/* ==================================================================
   移动端（按移动端PSD设计稿重新设计，和桌面端视觉完全独立）
   桌面端结构 (.page / .site-header / .breadcrumb / .inner-main / .inner-footer)
   在移动宽度下隐藏，改用 .m-view 这一套独立的移动端结构。
   ================================================================== */

.m-view { display: none; }

/* 报名页复用桌面/移动共用 DOM，标签栏挂在 .m-view 之外，
   所以需要单独默认隐藏，再在移动端媒体查询里唤醒 */
.m-tabbar { display: none; }
.m-register-badge { display: none; }
.m-register-field-copy,
.m-register-file-copy { display: none; }

@media (max-width: 768px) {
  body.register-body {
    overflow: hidden !important;
  }

  .page, .site-header, .breadcrumb, .inner-main, .inner-footer {
    display: none !important;
  }

  /* 报名页表单在桌面/移动端共用同一份 DOM（避免表单 id 冲突导致 JS 出错），
     这里直接用媒体查询重新排版，而不是像其它页面那样切到独立的 .m-view */
  .register-page {
    padding: 0 16px;
    padding-bottom: 110px;
    background: #061a3f url("/assets/optimized/m-content-bg.f51d2fb11337.webp") no-repeat top center / cover;
    height: 100dvh;
    overflow: hidden;
  }

  /* 移动端只保留左上角 logo，不带文字说明，跟其它内页顶部 logo 位置对齐 */
  .register-header {
    align-self: flex-start;
    justify-content: flex-start;
    margin: 26px 0 0 4px;
  }

  .register-header img {
    width: 50px;
  }

  .register-header h1 {
    display: none;
  }

  .register-page > .m-content-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

  /* 标题胶囊 + 表单整体放进跟其它内页一样的"子框"（.m-card）里，
     真正滚动、裁切的边界就是这个子框自己 */
  .m-card.m-register-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 24px;
  }

  /* 表单不再套一层白色卡片背景，直接露出外层卡片框的蓝色底 */
  .register-form {
    width: 100%;
    max-width: 360px;
    padding: 10px 18px 26px;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* 表单里各元素桌面端用的是 min(vw,px)，vw 是按 1920px 画布换算的，
     到了 375px 的手机宽度这些百分比会小到几乎看不见（比如 0.85vw≈3px），
     所以这里必须用手机端专属的固定 px 数值整体覆盖，不能指望 vw 自动适配 */
  .form-group {
    margin-bottom: 20px;
  }

  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group select,
  .form-group input[type="file"],
  .form-group .custom-select-trigger {
    height: 44px;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 15px;
  }

  .form-group input[type="file"] {
    padding: 9px 14px;
    font-size: 13px;
  }

  .form-group select,
  .form-group .custom-select-trigger {
    background-position: right 12px center;
    background-size: 16px;
  }

  .custom-select-options li {
    padding: 10px 14px;
    font-size: 15px;
  }

  .form-submit {
    height: 46px;
    font-size: 16px;
    letter-spacing: 2px;
    margin-top: 6px;
  }

  .form-message {
    min-height: 18px;
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* body:has(.page) 的桌面端 flex 居中规则在移动宽度下要失效，
     换成让 body 把下面这个锁死宽高比的"设计画布"整体居中。
     画布比屏幕矮（屏幕比 430:932 更"高瘦"）时，多出来的空间在画布
     上下留白；画布比屏幕宽时同理左右留白——不会出现页面级滚动条。 */
  body {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 0 !important;
    height: 100dvh;
    overflow: hidden;
  }

  /* 手机端根容器统一按 移动端PSD 430:932 的画布比例锁死宽高比，
     不再各自用 100vw / 100dvh 独立撑满宽和高——那样在实际屏幕比例跟
     设计稿不一致时，横向和纵向的缩放倍数会不一样，文字和按钮看起来
     就像被拉伸/压扁了（这是客户反馈"变形"的根因）。
     现在宽度优先撑满可用宽度，aspect-ratio 保证宽高比恒定为 430:932，
     真撑不下时（屏幕比画布更"矮胖"）改由 100dvh 反推宽度，
     多余空间交给外层 body 的 flex 居中来处理，不产生滚动。 */
  .m-view {
    display: block;
    position: relative;
    width: min(100%, calc(100dvh * 430 / 932));
    height: auto;
    aspect-ratio: 430 / 932;
    margin: 0 auto;
    background: #061a3f url("/assets/optimized/m-content-bg.f51d2fb11337.webp") no-repeat top center / cover;
    background-size: 100% 100%;
    padding-bottom: 110px;
    font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
    overflow: hidden;
  }

  /* 内页（非首页）：logo 固定在顶部，中间的标题胶囊+正文卡片
     在 logo 和底部标签栏之间的剩余空间里整体垂直居中 */
  .m-view:not(.m-splash) {
    display: flex;
    flex-direction: column;
  }

  .m-content-logo {
    display: block;
    width: 50px;
    height: auto;
    margin: 26px 0 0 20px;
    flex: 0 0 auto;
  }

  .m-content-space {
    height: 10px;
    flex: 0 0 auto;
  }

  /* 卡片外框：标题胶囊固定在顶部不滚动，下面的正文区域单独滚动。
     大小固定（由外层 flex:1 撑满 logo 和标签栏之间的剩余空间决定），
     不随内容多少变大变小。用图片做背景撑不住可滚动内容（图片是固定画面，
     不会随内容跟着裁切），所以改成纯 CSS 画两层：
     外层 .m-content-wrap 是半透明蓝色渐变的父框（不设边框）；
     内层 .m-card 完全透明、只有白色描边，是真正的那个"子框"——
     所有可滚动内容都在这个子框内部，浏览器原生按它的圆角+边界裁切，
     不会再出现内容超出边缘的问题 */
  .m-content-wrap {
    flex: 1 1 auto;
    min-height: 0;
    margin: 10px 16px 0;
    padding: 15px;
    display: flex;
    background: linear-gradient(165deg, rgba(35, 150, 240, 0.4), rgba(15, 60, 160, 0.8));
    border-radius: 18px;
  }

  .m-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 0;
  }

  .m-header img {
    width: 44px;
    height: auto;
    display: block;
  }

  .m-header span {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  /* 首页专属：logo + 主标题 + 副标题 + 指导单位文字，按 移动端V2-1.psd
     里 "主标/副标/LOGO/指导、联合、承办等" 图层的真实坐标换算间距 */
  .m-hero-logo {
    display: block;
    width: 68px;
    height: auto;
    margin: 78px 0 0 23px;
  }

  .m-hero-title {
    display: block;
    width: 330px;
    max-width: 88%;
    height: auto;
    margin: 20px auto 0;
  }

  .m-hero-subtitle {
    display: block;
    width: 270px;
    max-width: 75%;
    height: auto;
    margin: 26px auto 0;
  }

  .m-hero-line {
    display: block;
    width: 347px;
    max-width: 90%;
    height: auto;
    margin: 0 auto 0;
  }

  .m-hero-org {
    width: 88%;
    max-width: 340px;
    margin: 50px auto 0;
    padding: 12px 16px;
    background: rgba(15, 60, 160, 0.5);
    border-radius: 12px;
  }

  .m-hero-org p {
    display: flex;
    justify-content: center;
    color: #eaf4ff;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
  }

  .m-hero-org-label {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 主标区结束到底部标签栏之间的留白 */
  .m-splash-space {
    height: 260px;
  }

  /* 标题胶囊：现在和正文一起在卡片内滚动，不再单独固定在顶部 */
  .m-card-title {
    display: block;
    margin: 16px auto 14px;
    width: fit-content;
    max-width: 80%;
    padding: 6px 40px;
    background: linear-gradient(135deg, #2fc5f8, #1e5fe0);
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(10, 40, 120, 0.3);
  }

  /* 标题+正文整体在卡片内部滚动，不拖动整个页面一起滚动；
     卡片本身大小固定（由外层 .m-content-wrap 撑满剩余空间决定），内容超出就滚动，
     不会撑破卡片边界；手机端把滚动条本身隐藏掉（触摸滑动依然正常） */
  .m-card {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: transparent;
    border: 2.5px solid rgb(255, 255, 255);
    border-radius: 14px;
    padding: 14px 16px 20px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .m-card::-webkit-scrollbar {
    display: none;
  }

  .m-card p {
    color: #eaf4ff;
    font-size: 13.5px;
    line-height: 1.95;
    text-align: left;
    text-indent: 2em;
    margin-bottom: 4px;
  }

  .m-card p.m-section-title {
    text-align: center;
    text-indent: 0;
    background: linear-gradient(135deg, rgba(47, 197, 248, 0.35), rgba(30, 95, 224, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 14px 0 10px;
    font-weight: 600;
    color: #fff;
  }

  .m-card table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 12.5px;
    color: #fff;
  }

  .m-card table th, .m-card table td {
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 4px;
    text-align: center;
  }

  .m-card table th {
    background: rgba(255, 255, 255, 0.16);
  }

  .m-card .m-empty,
  .m-card .no-content {
    text-align: center;
    text-indent: 0;
    color: rgba(255, 255, 255, 0.65);
    padding: 30px 0;
    font-size: 13.5px;
  }

  /* 联系我们 / 部分内页复用了桌面端 .contact-field 结构，这里改成暗色主题配色 */
  .m-card .contact-field {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  }

  .m-card .contact-field .label {
    flex-shrink: 0;
    white-space: nowrap;
    color: #7dffb0;
    font-weight: 700;
    font-size: 13.5px;
  }

  .m-card .contact-field .value {
    min-width: 0;
    white-space: normal;
    color: #eaf4ff;
    font-size: 13px;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .m-card .contact-field .value.empty {
    color: rgba(255, 255, 255, 0.5);
  }

  .m-back-link {
    display: block;
    text-align: center;
    color: #bfe0ff;
    font-size: 12.5px;
    margin-top: 6px;
    text-decoration: underline;
  }

  /* ============ 底部标签栏（含悬浮报名按钮） ============ */

  .m-tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92px;
    z-index: 50;
  }

  .m-register-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 30px auto;
    width: fit-content;
    padding: 6px 40px;
    background: linear-gradient(135deg, #2fc5f8, #1e5fe0);
    border-radius: 22px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(10, 40, 120, 0.3);
  }

  .m-tabbar-bg {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 14px;
    height: 46px;
    background: url("/assets/optimized/m-tabbar.3bcfa10a9cbf.webp") no-repeat center / 100% 100%;
  }

  /* m-tabbar.png 图片本身底部约30%是投影，实心药丸只占图片上方约70%，
     文字如果按整张图 46px 高度居中，会明显偏低、贴着投影；
     这里改成只在实心药丸那部分区域（上方约32px）内垂直居中 */
  .m-tabbar-items {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 32px;
    height: 32px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
  }

  .m-tabbar-items a {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    display: block;
    transform: scale(1);
    transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
  }

  .m-tabbar-items a:active {
    transform: scale(1.5);
  }

  .m-tabbar-items a.active {
    opacity: 1;
    color: #ffffff;
    transform: scale(1.3);
  }

  /* 中间留给悬浮报名按钮的位置：5等分里的第3份，不参与文字链接的挤占，
     避免图片把两侧"赛制安排/赛事须知"的文字压得挤在一起甚至遮住 */
  .m-tabbar-spacer {
    flex: 0 0 72px;
  }

  /* 报名按钮图片本身较大（视觉上不缩小），但可点击热区只做图片的 1/3 大小，
     居中对齐同一个点，避免和左右紧邻的文字链接互相误触 */
  .m-tab-cta {
    position: absolute;
    left: 50%;
    top: 24px;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    z-index: 3;
  }

  .m-tab-cta img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

@media (min-width: 769px) {
  .m-view { display: none !important; }
}

/* ==================================================================
   移动端 V1 首页：PSD 独立图层实现
   ================================================================== */

@media (max-width: 768px) {
  .m-index-home {
    display: block !important;
  }

  .m-index-home.is-hidden {
    display: none !important;
  }

  .m-index-about {
    display: none !important;
  }

  .m-index-about.is-active {
    display: block !important;
  }

  .m-v1 {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #061a3f;
  }

  .m-v1-background,
  .m-v1-art {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .m-v1-background {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
  }

  .m-v1-logo {
    left: 5.563%;
    top: 8.436%;
    width: 15.884%;
    height: 5.624%;
    z-index: 2;
  }

  .m-v1-title {
    left: 12.086%;
    top: 13.83%;
    width: 75.694%;
    height: 23.656%;
    z-index: 2;
    }

  .m-v1-subtitle {
    left: 23.056%;
    top: 36.342%;
    width: 54.357%;
    height: 3.924%;
    z-index: 2;
  }

  .m-v1-glow {
    z-index: 1;
  }

  .m-v1-glow-left {
    left: 9.383%;
    top: 32.293%;
    width: 44.370%;
    height: 1.823%;
  }

  .m-v1-glow-right {
    left: 50.067%;
    top: 23.607%;
    width: 44.370%;
    height: 1.823%;
  }

  .m-v1-glow-org {
    left: 9.517%;
    top: 39.493%;
    width: 80.831%;
    height: 1.823%;
  }

  .m-v1-organizers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .m-v1-org-text {
    position: absolute;
    left: 23.3914%;
    top: 46.7862%;
    width: 53.2172%;
    height: 7.9110%;
    z-index: 3;
  }

  .m-v1-org-line {
    z-index: 1;
  }

  .m-v1-org-line-1 {
    left: 26.072%;
    top: 47.898%;
    width: 48.324%;
    height: 0.185%;
  }

  .m-v1-org-line-2 {
    left: 14.678%;
    top: 50.371%;
    width: 70.576%;
    height: 2.071%;
  }

  .m-v1-org-line-3 {
    left: 19.638%;
    top: 54.635%;
    width: 61.260%;
    height: 0.185%;
  }

  .m-v1-org-copy {
    display: none !important;
  }

  .m-v1 .m-tabbar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
  }

  .m-v1 .m-tabbar-bg {
    display: none;
  }

  .m-v1 .m-v1-tabbar-art {
    position: absolute;
    display: block;
    z-index: 1;
    pointer-events: none;
  }

  .m-mobile-bottom-menu {
    position: absolute;
    left: 0;
    top: 93.140%;
    width: 100%;
    height: 3.430%;
    padding: 0;
    display: block;
    z-index: 8;
    pointer-events: none;
  }

  .m-mobile-bottom-menu a {
    position: absolute;
    top: 0;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 1;
    font-size: clamp(7px, 2.8cqw, 12px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(13, 84, 157, 0.72);
    pointer-events: auto;
  }

  .m-mobile-bottom-menu a:nth-of-type(1) {
    left: 7.105%;
    width: 12.332%;
  }

  .m-mobile-bottom-menu a:nth-of-type(2) {
    left: 24.531%;
    width: 12.868%;
  }

  .m-mobile-bottom-menu a:nth-of-type(3) {
    left: 62.701%;
    width: 12.801%;
  }

  .m-mobile-bottom-menu a:nth-of-type(4) {
    left: 78.686%;
    width: 12.601%;
  }

  /* 点击进入页面后，当前菜单项持续放大；不使用 :active 的瞬时按压动画。 */
  .m-mobile-bottom-menu a.active {
    z-index: 1;
    transform: scale(1.5);
    transform-origin: center center;
  }

  .m-mobile-bottom-cta-art {
    position: absolute;
    left: 31.971%;
    top: 85.136%;
    width: 34.920%;
    height: 17.305%;
    display: block;
    z-index: 7;
    pointer-events: none;
  }

  .m-mobile-bottom-cta-hit {
    position: absolute;
    left: 40.7003%;
    top: 89.4623%;
    width: 17.4598%;
    height: 8.6527%;
    z-index: 10;
    display: block;
    background: transparent;
    pointer-events: auto;
  }
}

/* ==================================================================
   移动端交互与连续内容流
   视觉仍使用 PSD 图层，表单只是覆盖在对应图层上的交互层。
   ================================================================== */

@media (max-width: 768px) {
  /* 每个 PSD 状态仍保持自己的 100dvh 坐标系，但用负外边距把下一段
     接到上一段的最后一层之后，避免状态之间出现整屏空白。 */
  .m-layer-v3-v4 .m-layer-state:first-child {
    margin-bottom: -49.55cqh;
  }

  .m-layer-v3-v4 .m-layer-state:last-child {
    margin-bottom: -42.51cqh;
  }

  .m-layer-v6-v9 .m-layer-state:nth-child(1) {
    margin-bottom: -53.78cqh;
  }

  .m-layer-v6-v9 .m-layer-state:nth-child(2) {
    margin-bottom: -64.81cqh;
  }

  .m-layer-v6-v9 .m-layer-state:nth-child(3) {
    margin-bottom: -46.74cqh;
  }

  .m-layer-v6-v9 .m-layer-state:nth-child(4) {
    margin-bottom: -66.15cqh;
  }

  .m-layer-v11 .m-layer-state:first-child {
    margin-bottom: -42.35cqh;
  }

  .m-layer-v11 .m-layer-state:last-child {
    margin-bottom: -61.33cqh;
  }

  .m-layer-register .form-group input[type="text"],
  .m-layer-register .form-group input[type="tel"],
  .m-layer-register .custom-select-trigger {
    z-index: 3;
  }

  .m-layer-register .form-group .custom-select-trigger {
    appearance: none;
    border: 0;
    background: transparent !important;
  }

  .m-layer-register .custom-select-trigger,
  .m-layer-register .custom-select-trigger .placeholder {
    color: rgba(231, 238, 251, 0.95) !important;
  }

  .m-layer-register .custom-select-trigger:focus,
  .m-layer-register .custom-select-trigger:focus-visible {
    outline: none;
  }

  /* PSD 下拉图层默认隐藏，点击后由透明 li 热区承接选择。 */
  .m-layer-register .m-register-psd-dropdown {
    display: none;
    z-index: 9;
  }

  .m-layer-register:has(.custom-select-options.open) .m-register-psd-dropdown {
    display: block;
  }

  /* 下拉列表改为相对"报送类型"字段框的绝对定位（父级 .custom-select
     本身就是按画布百分比摆放的字段热区），百分比由 PSD 画布坐标换算：
     画布系 left 13.5389% / top 55.0371% / width 73.4584% / height 23.3622%
     ÷ 字段框 left 24.8660% / top 51.0507% / width 57.7748% / height 3.28%。
     不再用 position:fixed + vw/dvh 视口坐标——画布被锁定比例居中后
     和视口不再重合，视口坐标会让列表落在错误的位置上 */
  .m-layer-register .custom-select-options {
    position: absolute;
    left: -19.6057% !important;
    top: 121.5366% !important;
    bottom: auto !important;
    width: 127.1459% !important;
    height: 712.2622%;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .m-layer-register .custom-select-options.open {
    display: block;
  }

  .m-layer-register .custom-select-options li {
    display: flex;
    align-items: center;
    height: 12.5%;
    padding: 0;
    color: transparent;
    background: transparent;
    border: 0;
  }

  .m-layer-register .custom-select-options li:hover,
  .m-layer-register .custom-select-options li.selected {
    color: transparent;
    background: transparent;
  }

  /* 点击区域缩为 PSD 报名图层的 1/2，视觉图片本身不缩放。 */
  .m-layer-hit-nav a.register,
  .m-layer-register .form-submit {
    left: 40.7003%;
    top: 89.4623%;
    width: 17.4598%;
    height: 8.6527%;
  }

  .m-layer-register .m-register-psd-cta {
    overflow: visible;
  }

  .m-tab-cta {
    top: 15px;
    width: 54px;
    height: 54px;
  }

  .m-v1 .m-tab-cta {
    left: 40.7003%;
    top: 89.4623%;
    width: 17.4598%;
    height: 8.6527%;
  }

  /* 该图层由 script.js 在点击时插入页面底层，从“报名链接”文字中心连续扩散。 */
  .m-cta-ripple-layer {
    position: absolute;
    left: 50%;
    top: 92.06%;
    z-index: 1;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .m-cta-ripple-wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(75, 224, 255, 0.92);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    will-change: opacity, transform;
  }

  .m-cta-ripple-layer.is-active .m-cta-ripple-wave {
    animation: m-cta-ripple 900ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
  }

  @keyframes m-cta-ripple {
    0% {
      opacity: 0.95;
      transform: translate(-50%, -50%) scale(0.2);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(6.5);
    }
  }

  .m-v1 .m-cta-ripple-layer {
    z-index: 1;
  }

  .m-layer-register .m-cta-ripple-layer {
    z-index: 5;
  }

  .m-v1-home-active {
    position: absolute;
    left: 7.1046%;
    top: 93.1706%;
    z-index: 5;
    display: block;
    width: 12.3324%;
    height: 3.4611%;
    pointer-events: none;
  }

  /* 首项原文字合并在 PSD 底图内，使用同一底栏内的文字层替换为“关于大赛”。
     覆盖层只遮住合并文字，不绘制独立按钮，视觉始终融入整条底部渐变栏。 */
  .m-mobile-about-label {
    position: absolute;
    left: 7.1046%;
    top: 93.1400%;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12.3324%;
    height: 3.4302%;
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(180deg, #b4f4ff 0%, #52d8e8 48%, #c9f5fb 100%);
    color: #ffffff;
    font-size: clamp(6px, 2.35cqw, 11px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(13, 84, 157, 0.72);
    box-shadow: none;
    pointer-events: none;
  }

  .m-layer-register .m-mobile-about-label {
    z-index: 8;
  }
}

@media (max-width: 768px) {
  .register-desktop-art,
  .register-desktop-field-copy,
  .register-desktop-option-art {
    display: none !important;
  }
}

/* ==================================================================
   电脑端报名页：严格按 网页PSDV2/V2-12-01.psd 的 1920x1076 画布
   电脑端使用独立 PSD 图层；表单控件只覆盖在字段图层上提供交互。
   ================================================================== */

@media (min-width: 769px) {
  /* 电脑端普通页面必须由浏览器正常纵向滚动。注册页的画布锁定规则
     只能作用于 register.html，不能再通过裸 html/body 选择器污染全站。 */
  html:not(:has(> body.register-body)),
  body:not(.register-body) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  html:has(> body.register-body),
  body.register-body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  body.register-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f6f6f6 url("/assets/optimized/d-register-background.8ca9ac91a296.webp") no-repeat center / cover;
  }

  .register-page.m-layer-register {
    position: relative;
    flex: 0 0 auto;
    width: min(100vw, 178.438662vh);
    max-width: 1920px;
    height: auto;
    min-height: 0;
    aspect-ratio: 1920 / 1076;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    background: transparent;
  }

  .register-desktop-art {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
    pointer-events: none;
  }

  .register-desktop-layer {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  /* 背景交给 body 以 cover 铺满视口；其余 PSD 图层仍在 1920:1076
     等比画布内定位，避免为了铺满背景而拉伸表单和文字。 */
  .register-desktop-background {
    display: none;
  }

  .register-page > .m-layer-background,
  .register-page > .m-layer-fixed,
  .register-page > .m-register-psd-fields,
  .register-page > .m-register-psd-dropdown,
  .register-page > .m-register-psd-cta,
  .register-page > .m-layer-hit-nav,
  .register-page > .m-mobile-bottom-menu,
  .register-page > .m-mobile-bottom-cta-art,
  .register-page > .m-mobile-bottom-cta-hit,
  .register-page > .register-header,
  body.register-body > .m-layer-tabbar,
  body.register-body > .m-register-psd-nav-label,
  body.register-body > .m-register-psd-cta,
  body.register-body > .m-layer-hit-nav,
  body.register-body > .m-mobile-bottom-menu,
  body.register-body > .m-mobile-bottom-cta-art,
  body.register-body > .m-mobile-bottom-cta-hit {
    display: none !important;
  }

  .register-page > .m-content-wrap {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
  }

  .register-page .m-register-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  .register-page .register-form {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
  }

  .register-page .form-group {
    position: absolute;
    left: 38.645833%;
    width: 22.864583%;
    height: 3.717472%;
    margin: 0;
    pointer-events: none;
  }

  .register-page .form-group:nth-child(1) { top: 28.252788%; }
  .register-page .form-group:nth-child(2) { top: 34.758364%; }
  .register-page .form-group:nth-child(3) { top: 41.263941%; }
  .register-page .form-group:nth-child(4) { top: 47.862454%; }
  .register-page .form-group:nth-child(5) { top: 54.368030%; }
  .register-page .form-group:nth-child(6) { top: 60.873606%; }
  .register-page .form-group:nth-child(7) { top: 67.379182%; }

  .register-page .form-group label {
    display: none;
  }

  .register-page .form-group input[type="text"],
  .register-page .form-group input[type="tel"],
  .register-page .form-group input[type="file"],
  .register-page .form-group .custom-select-trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 5% 0 5.9%;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    color: #7f858a;
    font-family: inherit;
    font-size: clamp(12px, 1.1979vw, 23px);
    line-height: 1;
    outline: none;
    pointer-events: auto;
  }

  .register-page .form-group input::placeholder {
    color: transparent;
  }

  .register-page .form-group input[type="file"] {
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  .register-page .custom-select-trigger {
    text-align: left;
    cursor: pointer;
  }

  .register-page .custom-select {
    position: relative;
  }

  .register-page .custom-select-trigger .placeholder {
    color: transparent;
  }

  .register-page .m-register-field-copy,
  .register-page .m-register-file-copy {
    display: none;
  }

  .register-desktop-field-copy {
    position: absolute;
    z-index: 1;
    display: block;
    width: auto;
    pointer-events: none;
  }

  .register-desktop-copy-name {
    left: 5.922551%;
    top: 20%;
    height: 57.5%;
  }

  .register-desktop-copy-phone {
    left: 6.378132%;
    top: 22.5%;
    height: 55%;
  }

  .register-desktop-copy-idcard {
    left: 5.922551%;
    top: 22.5%;
    height: 57.5%;
  }

  .register-desktop-copy-region,
  .register-desktop-copy-category {
    left: 5.922551%;
    top: 20%;
    height: 55%;
  }

  .register-desktop-copy-project {
    left: 5.694761%;
    top: 22.5%;
    height: 57.5%;
  }

  .register-desktop-copy-team {
    left: 6.150342%;
    top: 22.5%;
    height: 57.5%;
  }

  .register-page .form-group.has-value > .register-desktop-field-copy {
    visibility: hidden;
  }

  .register-page .form-group.has-file > .register-desktop-field-copy {
    visibility: hidden;
  }

  .register-page .form-group.has-file > .m-register-file-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2%;
    padding-left: 5.9%;
    color: #7f858a;
    font-size: clamp(11px, 1.1979vw, 23px);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  .register-page .m-register-file-label,
  .register-page .m-register-file-hint {
    position: static;
    transform: none;
    color: inherit;
    font-size: inherit;
  }

  .register-page .m-register-file-hint {
    color: #8e979d;
  }

  .register-page .custom-select-options {
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 30;
    display: none;
    width: 100%;
    height: 942.5%;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: url("/assets/optimized/d-register-dropdown.bf949f414c34.webp") no-repeat 0 0 / 100% 100%;
    box-shadow: none;
    pointer-events: auto;
  }

  .register-page .custom-select-options.open {
    display: block;
  }

  .register-page .custom-select-options li {
    display: flex;
    align-items: center;
    height: 12.5%;
    margin: 0;
    padding: 0 0 0 5.922551%;
    color: transparent;
    font-size: 0;
    line-height: 1;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
  }

  .register-page .custom-select-options li:hover,
  .register-page .custom-select-options li.selected {
    color: transparent;
    background: transparent;
  }

  .register-page .register-desktop-option-art {
    display: block;
    width: auto;
    height: 48.8%;
    pointer-events: none;
  }

  .register-page .form-message {
    position: absolute;
    left: 38.541667%;
    top: 72.5%;
    z-index: 13;
    width: 22.916667%;
    min-height: 18px;
    margin: 0;
    color: #27628d;
    font-size: clamp(11px, 0.7292vw, 14px);
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
  }

  .register-page .form-submit {
    position: absolute;
    left: 38.541667%;
    top: 75.836431%;
    z-index: 14;
    width: 22.916667%;
    height: 5.947955%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
  }
}

/* ==================================================================
   移动端画布比例锁定（统一收口）
   所有移动端根容器一律锁定为 移动端PSD 的 430:932 画布比例，按屏幕
   等比缩放：优先撑满宽度，屏幕更"矮胖"时改由高度反推宽度。多余空间
   由 body 的 flex 居中留白（上下或左右出现空白属预期），页面不滚动。
   同时把画布声明为 size 容器，内部 cqw/cqh 一律相对画布而非屏幕，
   保证任何分辨率下横纵缩放倍数一致，文字和按钮不再变形。
   ================================================================== */

@media (max-width: 768px) {
  /* 背景不参与画布比例锁定：整张 m-content-bg.png 直接在 body 上
     拉伸铺满整个屏幕（100% 100%，允许变形），留白区域和内容区背后
     是同一张连续的图，不会出现纯色色条或拼缝；
     各画布自身的背景全部透明化、页面内的背景图层隐藏，
     避免出现两份缩放不一致的背景叠在一起 */
  body {
    background: #061a3f url("/assets/optimized/m-content-bg.f51d2fb11337.webp") no-repeat center / 100% 100%;
  }

  .m-view,
  .m-layer-page,
  .m-v1,
  .m-layer-register {
    position: relative;
    width: min(100%, calc(100dvh * 430 / 932));
    height: auto;
    min-height: 0;
    aspect-ratio: 430 / 932;
    overflow: hidden;
    container-type: size;
    background: transparent;
  }

  .m-layer-page .m-layer-background,
  .m-v1 > .m-v1-background {
    display: none;
  }

  /* 旧版 .m-view 内页的底部标签栏原来是 position:fixed（相对视口），
     画布居中留白后视口底部不再等于画布底部，改为钉在画布底部；
     文字和中间占位也换成画布比例单位，画布变窄时等比缩小而不是换行 */
  .m-view > .m-tabbar {
    position: absolute;
  }

  .m-view > .m-tabbar .m-tabbar-items a {
    font-size: 3.2cqw;
    white-space: nowrap;
  }

  .m-view > .m-tabbar .m-tabbar-spacer {
    flex-basis: 19.2cqw;
  }
}

/* 后台数据服务区：沿用内页蓝绿配色，不改变原 PSD 页面骨架。 */
.service-form { width: min(680px, 100%); margin: 0 auto; }
.service-fields { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-fields label { color: #465a70; font-size: 15px; font-weight: 700; }
.service-fields input {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 13px;
  border: 1px solid #cad8e8;
  border-radius: 5px;
  color: #1a2b4c;
  background: #f9fbfe;
  font-size: 15px;
}
.service-fields input:focus { border-color: #278bc4; outline: 2px solid rgba(39, 139, 196, .14); }
.service-submit {
  display: block;
  min-width: 150px;
  height: 42px;
  margin: 24px auto 0;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #1769aa;
  font-weight: 700;
  cursor: pointer;
}
.service-submit:disabled { cursor: wait; opacity: .65; }
.service-result { margin-top: 20px; color: #50647a; text-align: center; }
.service-result.error { color: #b42318; }
.score-result-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.score-result-grid div { padding: 13px 10px; border: 1px solid #dbe5ee; border-radius: 5px; background: #f7fafc; }
.score-result-grid span, .score-result-grid strong { display: block; }
.score-result-grid span { color: #74869a; font-size: 12px; }
.score-result-grid strong { margin-top: 4px; color: #173e62; font-size: 17px; }

.download-item { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px dashed #dfe7ef; }
.download-item:last-child { border-bottom: 0; }
.download-copy { min-width: 0; flex: 1; }
.download-copy strong { display: block; color: #1b3d5d; font-size: 16px; }
.download-copy span { display: block; margin-top: 4px; color: #748397; font-size: 13px; }
.download-link {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid #2b93c9;
  border-radius: 5px;
  color: #1769aa;
  text-decoration: none;
}
.managed-news { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid #dbe5ee; }
.managed-news h2 { margin: 0 0 14px; color: #1a2b4c; font-size: 19px; text-align: left; }
.managed-news-list { display: grid; gap: 8px; }
.managed-news-button {
  display: grid;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #dbe5ee;
  border-radius: 5px;
  color: #24445f;
  background: #f8fbfd;
  text-align: left;
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}
.managed-news-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-news-button time { color: #8694a3; font-size: 12px; }
.managed-news-detail { margin-top: 20px; }
.managed-news-detail h3 { color: #173e62; font-size: 20px; text-align: center; }

@media (max-width: 768px) {
  .service-fields, .score-result-grid { grid-template-columns: 1fr; }
  .service-fields { gap: 12px; }
  .service-fields label { color: #eaf4ff; font-size: 13px; }
  .service-fields input { height: 36px; margin-top: 5px; color: #102d4a; background: rgba(255,255,255,.94); font-size: 13px; }
  .service-submit { min-width: 128px; height: 36px; margin-top: 17px; background: #23a9dc; font-size: 13px; }
  .service-result { margin-top: 14px; color: #eaf4ff; font-size: 13px; }
  .service-result.error { color: #ffd0cc; }
  .score-result-grid div { border-color: rgba(255,255,255,.28); background: rgba(4,31,72,.42); }
  .score-result-grid span { color: #b8d5ec; }
  .score-result-grid strong { color: #fff; font-size: 15px; }
  .download-item { gap: 10px; padding: 12px 0; border-color: rgba(255,255,255,.24); }
  .download-copy strong { color: #fff; font-size: 13.5px; }
  .download-copy span { color: #bdd4e7; font-size: 11.5px; }
  .download-link { padding: 6px 10px; border-color: #7dd9ff; color: #fff; font-size: 12px; }
  .managed-news { margin-bottom: 18px; padding-bottom: 16px; border-color: rgba(255,255,255,.25); }
  .managed-news h2 { color: #fff; font-size: 15px; }
  .managed-news-button { padding: 9px; border-color: rgba(255,255,255,.28); color: #fff; background: rgba(8,45,91,.5); font-size: 12px; }
  .managed-news-button time { color: #b9d4e8; font-size: 10px; }
  .managed-news-detail h3 { color: #fff; font-size: 16px; }
}