/*
  商务科技风样式层 v7
  视觉基准：深电光靛蓝 + 浅蓝灰区块 + 直角卡片 + 双语居中标题
  1. 设计令牌（:root）
  2. body.tech 全站基础排版
  3. 通用区块 / 标题 / 卡片 / 按钮组件
  4. 首页专属组件
  5. 表单 / 表格 / 分页 / 弹窗
  6. 认证页 / 反馈组件
  全部选择器用 body.tech 限域，不影响未升级站点
*/

/* ============================================================
   1. 设计令牌
============================================================ */
:root {
  /* 品牌 */
  --brand: #0b00b5;
  --brand-rgb: 11, 0, 181;
  --brand-bright: #3a22e0;
  --brand-deep: #070073;
  --brand-cyan: #22d3ee;
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-bright) 100%);
  --grad-deep: linear-gradient(118deg, #05004f 0%, var(--brand) 42%, var(--brand-bright) 100%);
  --grad-hero: linear-gradient(115deg, #f9fbff 0%, #f1f5ff 55%, #e9eefe 100%);

  /* 中性 */
  --ink-900: #1a1a1a;
  --ink-800: #2b2b2b;
  --ink-700: #333333;
  --ink-600: #555555;
  --ink-500: #666666;
  --ink-400: #999999;
  --ink-300: #bbbbbb;
  --line: #e6ebf5;
  --line-strong: #d5ddec;
  --surface: #ffffff;
  --surface-alt: #f3f7ff;
  --surface-mute: #eef2fb;

  /* 功能 */
  --success: #12a05c;
  --warning: #e08a00;
  --danger: #d92d20;

  /* 形态：直角为主，胶囊仅用于标签 */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 999px;

  /* 阴影：克制、偏冷 */
  --shadow-card: 0 2px 12px rgba(var(--brand-rgb), .05);
  --shadow-hover: 0 10px 30px rgba(var(--brand-rgb), .12);
  --shadow-float: 0 8px 32px rgba(15, 26, 60, .10);

  /* 弧线纹理 */
  --pattern-arc-dark: repeating-radial-gradient(circle at 108% -10%,
      rgba(255, 255, 255, .10) 0 1px, transparent 1px 18px);
  --pattern-arc-light: repeating-radial-gradient(circle at 108% -10%,
      rgba(var(--brand-rgb), .07) 0 1px, transparent 1px 16px);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .25s;

  /* 布局 */
  --header-h: 70px;
  --section-y: 88px;
}

/* ============================================================
   2. 全站基础排版
============================================================ */
body.tech {
  background: var(--surface);
  color: var(--ink-700);
  min-height: 100vh;
  font-family: "PingFang SC", "PingFangSC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 基础排版用 :where() 降低权重，让组件类可以自然覆盖 */
.tech :where(a) { color: var(--ink-600); transition: color var(--dur); }
.tech :where(a):hover { color: var(--brand); }
.tech :where(h1, h2, h3, h4, h5, h6) { color: var(--ink-900); font-weight: 700; }
.tech :where(p, li, .text-muted, .muted) { color: var(--ink-500); }
.tech :where(label, small, .help-block) { color: var(--ink-500); }
body.tech .text-primary, body.tech .text-info { color: var(--brand) !important; }
body.tech .text-success { color: var(--success) !important; }
body.tech .text-warning { color: var(--warning) !important; }
body.tech .text-danger { color: var(--danger) !important; }
body.tech .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
body.tech .dropdown-menu > li > a { color: var(--ink-700); }
body.tech .dropdown-menu > li > a:hover,
body.tech .dropdown-menu > li > a:focus { color: var(--brand); background: var(--surface-alt); }

body.tech ::selection { background: rgba(var(--brand-rgb), .16); color: var(--ink-900); }
body.tech a:focus-visible,
body.tech button:focus-visible,
body.tech input:focus-visible,
body.tech select:focus-visible,
body.tech textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body.tech .container { max-width: 1200px; }

/* ============================================================
   3. 通用区块 / 标题 / 卡片 / 按钮
============================================================ */

/* --- 区块 --- */
.th-section {
  padding: var(--section-y) 0;
  position: relative;
}
.th-section--alt { background: var(--surface-alt); }
.th-section--dark {
  background: var(--grad-deep);
  color: #fff;
  overflow: hidden;
}
.th-section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-dark);
  pointer-events: none;
}
.th-section--dark > .container { position: relative; z-index: 1; }

/* --- 双语居中标题 --- */
.th-head { text-align: center; margin-bottom: 56px; }
.th-head h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1.35;
  margin: 0;
  letter-spacing: .01em;
  text-decoration: none;
}
.th-head-en {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.th-head--light h2 { color: #fff; }
.th-head--light .th-head-en { color: rgba(255, 255, 255, .55); }
.th-head p {
  margin: 16px auto 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-500);
}
.th-head--light p { color: rgba(255, 255, 255, .72); }

/* --- 网格 --- */
.th-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.th-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.th-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* .clearfix 的伪元素在 grid 容器里会变成网格项，必须清除 */
.th-grid-4::before, .th-grid-4::after,
.th-grid-3::before, .th-grid-3::after,
.th-grid-2::before, .th-grid-2::after,
.th-stats::before, .th-stats::after,
body.tech .sign-model-three .item-wrap::before,
body.tech .sign-model-three .item-wrap::after,
body.tech .index-encapsulation .e-list::before,
body.tech .index-encapsulation .e-list::after,
body.tech .index-signature .row::before,
body.tech .index-signature .row::after,
body.tech .index-partners .p-list::before,
body.tech .index-partners .p-list::after {
  content: none;
  display: none;
}

/* --- 直角卡片 --- */
.th-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.th-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
/* 卡片内部：图标 + 标题 + 说明 */
.th-card-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(var(--brand-rgb), .12) 0%, rgba(var(--brand-rgb), .04) 100%);
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), .1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.th-card-icon img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.th-card:hover .th-card-icon {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), .2);
}
.th-card h3,
.th-card .tit {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
  margin: 0 0 10px;
}
.th-card p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-500);
  margin: 0;
}
.th-card .th-btn,
.th-card .ms-btn { margin-top: 18px; }
.th-card .ms-btn-sm,
.th-card .ms-btn-secondary { height: 38px; padding: 0 22px; font-size: 14px; }

/* 功能/工具卡：内容左右居中 */
.th-card--center { text-align: center; }
.th-card--center .th-card-icon { margin: 0 auto 22px; }
.th-card--center h3 { margin-bottom: 12px; }

/* 流程步骤卡 */
.th-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.th-step { text-align: center; padding: 30px 20px 26px; }
.th-step-num {
  width: 30px;
  height: 30px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-step .th-card-icon { margin: 0 auto 18px; }
.th-step p { font-size: 14px; line-height: 1.8; color: var(--ink-500); margin: 0; }

/* 区块标题区的大数字 */
.th-head-num {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--brand);
  margin: 0 0 12px;
}
/* 区块底部居中行动按钮 */
.th-section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 48px;
}

/* --- 内页遗留区块统一为首页风格 --- */
body.tech .help > .tit,
body.tech .function-of > .tit,
body.tech .app-case > .tit,
body.tech .encapsulation-complete-6 > .h1,
body.tech .price-common > h1 {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand);
  margin: 0 0 40px;
}
body.tech .help dl {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 16px;
}

/* --- 服务定价：套餐选项卡 --- */
body.tech .price-tab {
  display: flex;
  justify-content: center;
}
body.tech .price-tab ul {
  width: auto;
  height: auto;
  line-height: 1.4;
  margin: 0 auto 52px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
}
body.tech .price-tab ul::before,
body.tech .price-tab ul::after { content: none; display: none; }
/* 选项卡上下留白对称：去掉与内容区首个 .price-common 的 80px 叠加 */
body.tech .price-con .price-common:first-child { margin-top: 0; }
body.tech .price-tab ul li {
  float: none;
  width: auto;
  min-width: 104px;
  margin: 0;
  padding: 10px 26px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-500);
  background: transparent;
  transition: color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
body.tech .price-tab ul li:hover {
  color: var(--brand);
  background: rgba(var(--brand-rgb), .08);
}
body.tech .price-tab ul li.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-bright) 100%);
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), .22);
}

/* --- 按钮 --- */
.th-btn,
.th-actions .ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 34px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.th-btn--primary {
  background: var(--brand);
  color: #fff !important;
}
.th-btn--primary:hover {
  background: var(--brand-bright);
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), .30);
  transform: translateY(-2px);
}
.th-btn--ghost {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand) !important;
}
.th-btn--ghost:hover {
  background: var(--brand);
  color: #fff !important;
  transform: translateY(-2px);
}
.th-btn--light {
  background: #fff;
  color: var(--brand) !important;
}
.th-btn--light:hover {
  background: rgba(255, 255, 255, .88);
  color: var(--brand) !important;
  transform: translateY(-2px);
}
.th-btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff !important;
}
.th-btn--outline-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand) !important;
  transform: translateY(-2px);
}

/* ============================================================
   4. header
============================================================ */
body.tech header {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--dur);
}
body.tech header.is-scrolled {
  box-shadow: 0 4px 20px rgba(15, 26, 60, .07);
}
body.tech .header {
  display: flex;
  align-items: center;
  height: var(--header-h);
}
body.tech .header .header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--header-h);
  float: none;
}
body.tech .header .header-left img { max-height: 40px; margin: 0; }
body.tech .header .phone-nav-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: var(--header-h);
  margin-left: 52px;
  float: none;
}
body.tech .header .phone-nav-wrap > .header-left { display: none; }
body.tech .header .ms-nav {
  display: flex;
  align-items: center;
  height: var(--header-h);
  float: none !important;
  margin: 0 auto 0 0;
}
body.tech .header .ms-nav > li {
  position: relative;
  height: var(--header-h);
  float: none;
  margin: 0;
}
body.tech .header .ms-nav > li > a {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 17px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-700);
  border: 0;
  transition: color var(--dur);
}
body.tech .header .ms-nav > li > a:hover { color: var(--brand); }
body.tech .header .ms-nav > li.active > a {
  color: var(--brand);
  font-weight: 600;
  border: 0;
}
body.tech .header .ms-nav > li.active::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 0;
}
body.tech .header .login {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-h);
  float: none !important;
}
body.tech .header .login > li { float: none; margin: 0; }
body.tech .header .login .ms-btn {
  height: 38px;
  line-height: 36px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur);
}
body.tech .header .login .ms-btn.ml10 { margin-left: 0; }
body.tech .header .login .ms-btn-default {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
body.tech .header .login .ms-btn-default:hover {
  background: rgba(var(--brand-rgb), .06);
  color: var(--brand);
}
body.tech .header .login .ms-btn-primary {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
}
body.tech .header .login .ms-btn-primary:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .26);
}

/* 已登录状态 */
body.tech .header .login-in { display: flex; align-items: center; height: var(--header-h); }
body.tech .header .login-user .abtn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  line-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 14px;
}
body.tech .header .login-user .btnbg1 {
  background: var(--brand);
  color: #fff !important;
  border: 1px solid var(--brand);
}
body.tech .header .login-user .btnbg1:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
}
body.tech .header .login-user .abtn + .abtn {
  border: 1px solid var(--line-strong);
  color: var(--ink-600);
  margin-left: 10px;
}
body.tech .header .login-user .abtn + .abtn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 移动端断点：隐藏 PC 头部/底部，改用与手机端首页一致的顶栏 + 抽屉导航 + 底部 */
@media (max-width: 991px) {
  /* h5.css 为旧版固定头部预留了 body padding-top，移动端已改用 sticky 顶栏，需归零 */
  body.tech { padding-top: 0; }
  body.tech > header { display: none; }
  /* 仅隐藏 PC 底部：移动端底部同为 body 直接子级 footer，需用 :not 排除 */
  body.tech > footer:not(.mt-footer) { display: none; }
}

/* PC 断点：隐藏移动端顶栏、抽屉与底部 */
@media (min-width: 992px) {
  body.tech .mt-topbar,
  body.tech .mt-nav,
  body.tech .mt-footer { display: none; }
}

/* ============================================================
   5. footer
============================================================ */
body.tech footer {
  background: #000000;
  color: rgba(255, 255, 255, .78);
  position: relative;
  overflow: hidden;
}
body.tech footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 108% -10%,
      rgba(255, 255, 255, .055) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
body.tech footer > .container { position: relative; z-index: 1; }
body.tech .footer { padding: 56px 0 0; }
body.tech .footer .left dt {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
body.tech .footer .left dd.line {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, .35);
  margin: 10px 0 14px;
  border: 0;
}
body.tech .footer .left dd a,
body.tech .footer .left dd {
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 28px;
}
body.tech .footer .left dd a:hover { color: #fff; }
body.tech .footer .wechat img {
  border-radius: var(--radius);
  background: #fff;
  padding: 6px;
}
body.tech .footer > .container > .footer > p { color: rgba(255, 255, 255, .62); }
body.tech .footer .record {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .60);
  font-size: 13px;
}
body.tech .footer .record a,
body.tech .footer .record p { color: rgba(255, 255, 255, .60) !important; }
body.tech .footer .record a:hover { color: #fff !important; }
body.tech .footer.visible-xs .con a { color: rgba(255, 255, 255, .72); }
body.tech .footer.visible-xs .con span { color: rgba(255, 255, 255, .3); margin: 0 6px; }
body.tech .footer.visible-xs .p1,
body.tech .footer.visible-xs .p2 { color: rgba(255, 255, 255, .5); font-size: 12px; }

/* ============================================================
   6. 侧边悬浮客服
============================================================ */
body.tech .fixed-right {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
body.tech .fixed-right li {
  background: var(--brand);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--dur);
}
body.tech .fixed-right li:first-child { border-top: 0; }
body.tech .fixed-right li:hover { background: var(--brand-bright); }
body.tech .fixed-right li > a,
body.tech .fixed-right li div { color: #fff; }
body.tech .fixed-right li .iconfont { color: #fff; }
body.tech .fixed-right .go-top { cursor: pointer; }

/* ============================================================
   7. 通用卡片容器
============================================================ */
body.tech .con,
body.tech .panel,
body.tech .list-bottom-common .con,
body.tech .ms-thumbnail,
body.tech .thumbnail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.tech .con:hover,
body.tech .panel:hover,
body.tech .ms-thumbnail:hover,
body.tech .thumbnail:hover {
  border-color: transparent;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
body.tech .ms-thumbnail .caption { color: var(--ink-600); }

/* ============================================================
   8. 内页 tab 容器 publicity
============================================================ */
body.tech .publicity-wrap {
  background: var(--surface-alt) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 0;
}
body.tech .publicity-wrap .nav-tabs { border-bottom: none; margin-bottom: 0; }
body.tech .publicity-wrap .nav-tabs > li > a {
  color: var(--ink-500) !important;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom-color: var(--line-strong);
}
body.tech .publicity-wrap .nav-tabs > li.active > a,
body.tech .publicity-wrap .nav-tabs > li.active > a:hover {
  color: var(--brand) !important;
  border-bottom-color: var(--brand);
  background: transparent;
}
body.tech .publicity-wrap .tab-content {
  border: 1px solid var(--line);
  border-top: none;
  background: #fff;
}
body.tech .publicity-wrap .media-object { border-radius: var(--radius); }
body.tech .publicity-wrap .media-heading { color: var(--ink-900); }
body.tech .publicity-wrap .media-body p { color: var(--ink-500); }
body.tech .publicity-wrap .publicity-list > li { border-bottom: 1px solid var(--line); }
body.tech .publicity-wrap .publicity-list > li:hover { background: var(--surface-alt); }
body.tech .publicity-wrap .publicity-list .title { color: var(--ink-800); }
body.tech .publicity-wrap .publicity-list .time { color: var(--ink-400); }

/* ============================================================
   9. 首页 Hero
============================================================ */
.th-hero {
  position: relative;
  background: var(--grad-hero);
  padding: 96px 0 104px;
  overflow: hidden;
}
.th-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-light);
  pointer-events: none;
}
.th-hero::after {
  content: "";
  position: absolute;
  width: 780px;
  height: 780px;
  right: -220px;
  bottom: -340px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(58, 34, 224, .20) 0%,
      rgba(58, 34, 224, .08) 46%,
      rgba(58, 34, 224, 0) 70%);
  pointer-events: none;
}
.th-hero > .container { position: relative; z-index: 1; }
.th-hero-inner { max-width: 690px; }
.th-hero-tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(var(--brand-rgb), .25);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brand);
  background: rgba(255, 255, 255, .7);
  margin-bottom: 26px;
}
.th-hero-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--brand);
  margin: 0 0 24px;
}
.th-hero-desc {
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink-600);
  margin: 0 0 38px;
}
.th-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.th-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0 34px;
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}
.th-hero-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.8;
}
.th-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--brand);
  transform: rotate(45deg);
}
/* 内页版 Hero：高度为首页 Hero 的一半 */
.th-hero--sm { padding: 48px 0 52px; }
.th-hero--sm .th-hero-inner { max-width: 860px; }
.th-hero--sm .th-hero-title {
  font-size: 32px;
  margin-bottom: 14px;
}
.th-hero--sm .th-hero-desc { font-size: 15px; margin-bottom: 0; line-height: 1.8; }
.th-hero--sm .th-hero-tag { margin-bottom: 18px; }
.th-hero--sm .th-hero-points { margin-top: 24px; }

/* Hero 右侧主题大图标 */
.th-hero > .container {
  display: flex;
  align-items: center;
  gap: 56px;
}
.th-hero-inner { flex: 1 1 auto; min-width: 0; }
.th-hero-visual {
  position: relative;
  flex: 0 0 auto;
}
.th-hero-visual::before,
.th-hero-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--brand-rgb), .18);
}
.th-hero-visual::before { width: 26px; height: 26px; top: 6px; right: 2px; }
.th-hero-visual::after { width: 14px; height: 14px; bottom: 22px; left: -16px; }
.th-hero-visual-icon {
  position: relative;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-bright) 100%);
  box-shadow: 0 20px 44px rgba(var(--brand-rgb), .28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-hero-visual-icon svg {
  width: 100px;
  height: 100px;
  color: #fff;
}
.th-hero--sm > .container { gap: 40px; }
.th-hero--sm .th-hero-visual-icon {
  width: 148px;
  height: 148px;
  box-shadow: 0 14px 30px rgba(var(--brand-rgb), .24);
}
.th-hero--sm .th-hero-visual-icon svg { width: 72px; height: 72px; }
.th-hero--sm .th-hero-visual::before { width: 18px; height: 18px; top: 2px; right: 0; }
.th-hero--sm .th-hero-visual::after { width: 11px; height: 11px; bottom: 14px; left: -14px; }

/* ============================================================
   10. 首页服务卡片（首卡高亮）
============================================================ */
.th-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px 36px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.th-feature::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--brand);
  transition: width .35s var(--ease);
}
.th-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.th-feature:hover::after { width: 100%; }

.th-feature-icon {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, rgba(var(--brand-rgb), .12) 0%, rgba(var(--brand-rgb), .04) 100%);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), .1);
  margin: 0 auto 26px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.th-feature-icon img { width: 34px; height: 34px; object-fit: contain; }
.th-feature:hover .th-feature-icon {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), .2);
}
.th-feature h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.th-feature p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-500);
  margin: 0 0 22px;
  flex: 1;
}
.th-feature-more {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: .04em;
}

/* 高亮卡：实心主色 */
.th-feature.is-primary {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
}
.th-feature.is-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-dark);
  pointer-events: none;
}
.th-feature.is-primary > * { position: relative; z-index: 1; }
.th-feature.is-primary::after { background: rgba(255, 255, 255, .9); }
.th-feature.is-primary:hover { box-shadow: 0 16px 40px rgba(var(--brand-rgb), .30); }
.th-feature.is-primary .th-feature-icon {
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.th-feature.is-primary:hover .th-feature-icon {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
.th-feature.is-primary .th-feature-icon img {
  filter: brightness(0) invert(1);
}
.th-feature.is-primary h3,
.th-feature.is-primary p,
.th-feature.is-primary .th-feature-more { color: #fff; }
.th-feature.is-primary p { color: rgba(255, 255, 255, .82); }

/* ============================================================
   11. 首页数据卡片
============================================================ */
.th-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.th-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 30px 40px;
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.th-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.th-stat-num {
  display: inline-block;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.th-stat-unit {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
  margin-left: 4px;
  vertical-align: 6px;
}
.th-stat-label {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-400);
}
/* 首卡高亮 */
.th-stat.is-primary {
  background: var(--grad-brand);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.th-stat.is-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-dark);
  pointer-events: none;
}
.th-stat.is-primary .th-stat-num,
.th-stat.is-primary .th-stat-unit { color: #fff; position: relative; }
.th-stat.is-primary .th-stat-label { color: rgba(255, 255, 255, .72); position: relative; }

/* ============================================================
   12. index-common 区块标题（中文 + 英文副标题）
============================================================ */
body.tech .index-common { position: relative; }
body.tech .index-common > h1 {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--brand) !important;
  text-align: center;
  margin: 0 0 14px;
  text-decoration: none;
}
body.tech .index-common > h1::before,
body.tech .index-common > h1::after {
  display: none;
  content: none;
}
/* 用 data-en 渲染全大写英文副标题 */
body.tech .index-common > h1[data-en]::after {
  content: attr(data-en);
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-300);
}
body.tech .index-common > h4 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink-500) !important;
  text-align: center;
  margin: 0 auto 48px !important;
  max-width: 760px;
}

/* ============================================================
   13. UDID 证书
============================================================ */
body.tech .sign-model-three {
  background: var(--surface-alt) !important;
  padding: var(--section-y) 0;
  position: relative;
}
body.tech .sign-model-three h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--brand);
  text-align: center;
  margin: 0 0 52px;
}
body.tech .sign-model-three h1[data-en]::after {
  content: attr(data-en);
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-300);
}
body.tech .sign-model-three .item-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
body.tech .sign-model-three .item {
  float: none;
  width: auto;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 26px 36px;
  margin: 0;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.tech .sign-model-three .item:hover {
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
}
body.tech .sign-model-three .item .img-wrap {
  height: 72px;
  line-height: 72px;
  margin-bottom: 8px;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
body.tech .sign-model-three .item img { margin: 0 auto; max-height: 56px; }
body.tech .sign-model-three .item .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 18px 0 12px;
}
body.tech .sign-model-three .item .s-title {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.85;
  padding: 0;
  margin-bottom: 22px;
}
body.tech .sign-model-three .item button {
  width: 100%;
  height: 42px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur);
}
body.tech .sign-model-three .item button:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ============================================================
   14. 内测发布 / 在线封装 / 证书签名 共享区块
============================================================ */
body.tech div[style*="background-color:#d1e4f9"] {
  background: var(--surface-alt) !important;
}
body.tech div[style*="background-color:#FFF"],
body.tech div[style*="background-color:#fff"] {
  background: var(--surface) !important;
}
/* 区块底色：显式类，便于按节奏交替 */
.th-bg-light { background: var(--surface-alt); }
.th-bg-white { background: var(--surface); }
body.tech .index-releas,
body.tech .index-encapsulation,
body.tech .index-signature {
  padding: var(--section-y) 0;
}

/* 内测发布四宫格 */
body.tech .index-releas .ms-thumbnail {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 36px 22px 30px;
  height: 100%;
}
body.tech .index-releas .ms-thumbnail img { margin: 0 auto 22px; max-height: 88px; }
body.tech .index-releas .ms-thumbnail .tit {
  color: var(--ink-800);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}
body.tech .index-releas .ms-btn-secondary,
body.tech .index-encapsulation .ms-btn-secondary,
body.tech .index-signature .more {
  display: block;
  width: 200px;
  height: 48px;
  line-height: 46px;
  margin: 44px auto 0;
  padding: 0;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: all var(--dur) var(--ease);
}
body.tech .index-releas .ms-btn-secondary,
body.tech .index-encapsulation .ms-btn-secondary {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
}
body.tech .index-releas .ms-btn-secondary:hover,
body.tech .index-encapsulation .ms-btn-secondary:hover {
  background: var(--brand-bright) !important;
  border-color: var(--brand-bright) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), .28);
  transform: translateY(-2px);
}
body.tech .index-signature .more {
  border: 1px solid var(--brand);
  color: var(--brand) !important;
  background: transparent;
}
body.tech .index-signature .more:hover {
  background: var(--brand);
  color: #fff !important;
  transform: translateY(-2px);
}

/* 在线封装五宫格 */
body.tech .index-encapsulation .e-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.tech .index-encapsulation .e-list > li { width: auto; float: none; margin: 0; }
body.tech .index-encapsulation .ms-thumbnail {
  background: var(--surface);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 34px 18px 28px;
  height: 100%;
}
body.tech .index-encapsulation .ms-thumbnail img { margin: 0 auto 20px; max-height: 72px; }
body.tech .index-encapsulation .ms-thumbnail .tit {
  color: var(--ink-900);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}
body.tech .index-encapsulation .ms-thumbnail p {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* 证书签名四宫格 */
body.tech .index-signature-wrap {
  height: auto !important;
  min-height: 0;
  background: transparent !important;
}
body.tech .index-signature .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
}
body.tech .index-signature .row > div {
  width: auto;
  float: none;
  padding: 0;
}
body.tech .index-signature .row .con {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 34px 30px !important;
  height: 100%;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.tech .index-signature .row .con:hover {
  border-color: transparent !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
body.tech .index-signature .row .con .img-wrap {
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(var(--brand-rgb), .12) 0%, rgba(var(--brand-rgb), .04) 100%);
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), .12);
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  margin: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.tech .index-signature .row .con .img-wrap img {
  max-width: 108px;
  max-height: 108px;
  object-fit: contain;
}
body.tech .index-signature .row .con:hover .img-wrap {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), .2);
}
body.tech .index-signature .row .con dl { margin: 0; flex: 1; }
body.tech .index-signature .row .con dl dt {
  color: var(--ink-900);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.5;
}
body.tech .index-signature .row .con dl dd {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.85;
  margin: 0;
}

/* ============================================================
   15. 合作伙伴
============================================================ */
body.tech .index-partners {
  padding: var(--section-y) 0;
}
body.tech .index-partners .p-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.tech .index-partners .p-list > li {
  width: auto;
  float: none;
  margin: 0;
}
body.tech .index-partners .con {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 30px 22px;
  height: 100%;
  overflow: hidden;
  text-align: center;
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.tech .index-partners .con:hover {
  border-color: transparent !important;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
/* 图标在上、文字在下，两者留出稳定间距 */
body.tech .index-partners .con img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 20px;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity var(--dur), filter var(--dur);
}
body.tech .index-partners .con:hover img {
  opacity: 1;
  filter: grayscale(0);
  transform: none;
}
body.tech .index-partners .con p {
  /* 原模板是 hover 时才显示的绝对定位遮罩层，这里恢复为常规文字流 */
  position: static;
  display: block;
  width: auto;
  height: auto;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-400);
  margin: 0;
  padding: 0;
  background: transparent !important;
  cursor: default;
}

/* ============================================================
   16. 净网区块
============================================================ */
body.tech .publish-standard {
  background: var(--grad-deep) !important;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  position: relative;
  overflow: hidden;
}
body.tech .publish-standard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-dark);
  pointer-events: none;
}
body.tech .publish-standard > .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 48px;
  padding-top: 34px;
  padding-bottom: 34px;
}
body.tech .publish-standard .left { flex: 0 0 auto; text-align: center; }
body.tech .publish-standard .left .title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
}
body.tech .publish-standard .left .s-title {
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 6px;
}
body.tech .publish-standard .right { flex: 1; }
body.tech .publish-standard .right p {
  color: rgba(255, 255, 255, .70);
  font-size: 13px;
  line-height: 1.95;
  margin: 0;
}
body.tech .publish-standard .right a { color: #fff !important; }

/* ============================================================
   17. 按钮 / 表格 / 表单 / 分页 / 徽章 / 弹窗
============================================================ */
body.tech .ms-btn {
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
  font-weight: 500;
}
body.tech .ms-btn-default {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
body.tech .ms-btn-default:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
body.tech .ms-btn-primary {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
}
body.tech .ms-btn-primary:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), .28);
}
body.tech .ms-btn-lg { padding: 12px 40px; font-size: 15px; }

body.tech .table > thead > tr > th,
body.tech .table > thead > tr > td,
body.tech .table > tbody > tr > th,
body.tech .table > tbody > tr > td {
  border-color: var(--line);
  color: var(--ink-700);
}
body.tech .table > thead > tr > th {
  background: var(--surface-alt);
  color: var(--brand);
  font-weight: 600;
}
body.tech .table-striped > tbody > tr > td,
body.tech .table-striped > tbody > tr > th { background: #fafbff; }

body.tech input.form-control,
body.tech textarea.form-control,
body.tech select.form-control {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-800);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
body.tech input.form-control:focus,
body.tech textarea.form-control:focus,
body.tech select.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .10);
  color: var(--ink-900);
}
body.tech .form-control::placeholder { color: var(--ink-300); }
body.tech .input-group-addon {
  background: var(--surface-alt);
  border-color: var(--line-strong);
  color: var(--ink-600);
  border-radius: var(--radius);
}
body.tech .control-label { color: var(--ink-700); font-weight: 500; }
body.tech .has-error .form-control { border-color: var(--danger); }
body.tech .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .10); }

body.tech .pagination > li > a,
body.tech .pagination > li > span {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink-600);
  border-radius: var(--radius) !important;
  margin: 0 2px;
}
body.tech .pagination > li > a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface-alt);
}
body.tech .pagination > .active > a,
body.tech .pagination > .active > span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.tech label.label {
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: var(--radius);
  font-weight: 500;
}
body.tech label.label-success { background: rgba(18, 160, 92, .08); color: var(--success); border-color: rgba(18, 160, 92, .20); }
body.tech label.label-warning { background: rgba(224, 138, 0, .08); color: var(--warning); border-color: rgba(224, 138, 0, .20); }
body.tech label.label-danger { background: rgba(217, 45, 32, .08); color: var(--danger); border-color: rgba(217, 45, 32, .20); }

body.tech .btn-primary {
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  color: #fff;
  transition: all var(--dur) var(--ease);
}
body.tech .btn-primary:hover {
  background: var(--brand-bright);
  border-color: var(--brand-bright);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), .28);
}
body.tech .btn-secondary,
body.tech .btn-default {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: var(--radius);
  transition: all var(--dur) var(--ease);
}
body.tech .btn-secondary:hover,
body.tech .btn-default:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

body.tech .ms-modal .modal-content {
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(15, 26, 60, .25);
  overflow: hidden;
}
body.tech .ms-modal .modal-header {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding: 18px 26px;
}
body.tech .ms-modal .modal-title { font-weight: 700; color: var(--brand); }
body.tech .ms-modal .modal-body { padding: 26px; color: var(--ink-600); line-height: 1.85; }
body.tech .ms-modal .modal-footer { border-top: 1px solid var(--line); padding: 14px 26px; }

/* ============================================================
   18. 认证页（登录 / 注册 / 找回密码）
============================================================ */
.th-auth-wrap {
  min-height: 100vh;
  padding: 0 16px 44px;
  background: var(--grad-hero);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.th-auth-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern-arc-light);
  pointer-events: none;
}
.th-auth-wrap > * { position: relative; z-index: 1; }
.th-auth-brand {
  text-align: center;
  margin: 0 auto 32px;
  padding-top: 56px;
}
.th-auth-brand img { max-height: 46px; margin: 0 auto; }
.th-auth-brand .slogan-text {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink-500);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 18px;
  width: auto;
  height: auto;
  line-height: 1.5;
  box-shadow: none;
}
.th-auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(15, 26, 60, .07);
  padding: 40px 38px 34px;
}
.th-auth-card .tit {
  display: block;
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
  text-align: center;
  margin: 0 0 30px;
}
.th-auth-card .tit.tit-tab { display: table; margin-bottom: 26px; }
.th-auth-card .tit a {
  display: table-cell;
  width: 50%;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-500);
  line-height: 40px;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur), border-color var(--dur);
}
.th-auth-card .tit a.active {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
}
.th-auth-card .form-group { position: relative; margin-bottom: 22px; }
.th-auth-card .form-group > label.iconfont {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-300);
  font-size: 17px;
  margin: 0;
  pointer-events: none;
}
.th-auth-card .form-control.input-lg {
  height: 50px;
  padding-left: 44px;
  border-radius: var(--radius);
  font-size: 14px;
}
.th-auth-card .verification-code .form-control { padding-left: 44px; }
.th-auth-card .verification-code .ms-btn {
  height: 50px;
  line-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.th-auth-card .verification-code img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  cursor: pointer;
  height: 50px;
}
.th-auth-card .help-block { display: none; margin: 6px 0 0; font-size: 12px; }
.th-auth-card .has-error .help-block { display: block; color: var(--danger); }
.th-auth-card .checkbox {
  font-size: 13px;
  color: var(--ink-500);
  margin: 0 0 24px;
  min-height: 20px;
}
body.tech input[type="checkbox"],
body.tech input[type="radio"] { accent-color: var(--brand); }
.th-auth-card .checkbox input { margin-right: 8px; vertical-align: -2px; }
.th-auth-card .ms-btn.ms-btn-primary.input-lg {
  width: 100%;
  height: 50px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}
.th-auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 13px;
}
.th-auth-links.text-center { justify-content: center; }
.th-auth-tip {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 22px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-500);
}
.th-auth-tip a { color: var(--brand); }

/* ============================================================
   19. 反馈组件：空状态 / 提示 / 加载 / Toast
============================================================ */
.th-empty { padding: 60px 20px; text-align: center; color: var(--ink-500); }
.th-empty .th-empty-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  border-radius: var(--radius);
  font-size: 28px;
  color: var(--brand);
}
.th-empty .th-empty-title { font-size: 15px; color: var(--ink-700); font-weight: 600; margin-bottom: 6px; }
.th-empty .th-empty-desc { font-size: 13px; margin: 0; }

.th-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.75;
  border: 1px solid transparent;
  border-left-width: 3px;
  margin-bottom: 16px;
}
.th-alert-info { background: var(--surface-alt); border-color: rgba(var(--brand-rgb), .18); color: var(--ink-700); }
.th-alert-success { background: rgba(18, 160, 92, .06); border-color: rgba(18, 160, 92, .30); color: #0b7a45; }
.th-alert-warning { background: rgba(224, 138, 0, .06); border-color: rgba(224, 138, 0, .30); color: #9a5f00; }
.th-alert-danger { background: rgba(217, 45, 32, .06); border-color: rgba(217, 45, 32, .30); color: #a81f16; }

.is-loading { position: relative; pointer-events: none; opacity: .8; }
.is-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: thSpin .7s linear infinite;
}
.btn-default.is-loading::after,
.btn-secondary.is-loading::after,
.ms-btn-default.is-loading::after {
  border-color: rgba(var(--brand-rgb), .25);
  border-top-color: var(--brand);
}

.th-toast-host {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.th-toast {
  min-width: 200px;
  max-width: 90vw;
  padding: 13px 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  box-shadow: 0 12px 40px rgba(15, 26, 60, .14);
  font-size: 14px;
  color: var(--ink-800);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.th-toast.is-show { opacity: 1; transform: translateY(0); }
.th-toast.is-success { border-left-color: var(--success); }
.th-toast.is-error { border-left-color: var(--danger); }
.th-toast.is-info { border-left-color: var(--brand); }

@keyframes thSpin { to { transform: rotate(360deg); } }

/* ============================================================
   20. 滚动进场
============================================================ */
.js .th-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .th-reveal.is-visible { opacity: 1; transform: translateY(0); }
.th-reveal-group > .th-reveal:nth-child(2) { transition-delay: .07s; }
.th-reveal-group > .th-reveal:nth-child(3) { transition-delay: .14s; }
.th-reveal-group > .th-reveal:nth-child(4) { transition-delay: .21s; }
.th-reveal-group > .th-reveal:nth-child(5) { transition-delay: .28s; }
.th-reveal-group > .th-reveal:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .js .th-reveal { opacity: 1; transform: none; transition: none; }
  .is-loading::after { animation-duration: 2s; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   21. 响应式
============================================================ */
@media (max-width: 1199px) {
  .th-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .th-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .th-steps { grid-template-columns: repeat(3, 1fr); }
  body.tech .index-encapsulation .e-list { grid-template-columns: repeat(3, 1fr); }
  body.tech .index-partners .p-list { grid-template-columns: repeat(4, 1fr); }
  body.tech .sign-model-three .item-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  :root { --section-y: 64px; }
  .th-hero { padding: 64px 0 72px; }
  .th-hero-title { font-size: 34px; }
  .th-hero--sm { padding: 32px 0 36px; }
  .th-hero--sm .th-hero-title { font-size: 24px; }
  .th-hero-visual { display: none; }
  .th-hero-desc { font-size: 15px; margin-bottom: 30px; }
  .th-head h2, body.tech .index-common > h1, body.tech .sign-model-three h1 { font-size: 24px; }
  .th-steps { grid-template-columns: repeat(2, 1fr); }
  body.tech .help > .tit,
  body.tech .function-of > .tit,
  body.tech .app-case > .tit,
  body.tech .encapsulation-complete-6 > .h1,
  body.tech .price-common > h1 { font-size: 24px; }
  .th-head { margin-bottom: 40px; }
  .th-head-num { font-size: 34px; }
  .th-grid-4, .th-grid-3, .th-grid-2 { grid-template-columns: 1fr; }
  .th-stats { grid-template-columns: 1fr; }
  body.tech .index-encapsulation .e-list { grid-template-columns: repeat(2, 1fr); }
  body.tech .index-partners .p-list { grid-template-columns: repeat(3, 1fr); }
  body.tech .index-signature .row { grid-template-columns: 1fr; }
  body.tech .publish-standard > .container { flex-direction: column; gap: 20px; }
  /* 手机/平板隐藏侧面客服浮窗（由 JS .show() 设为 inline，需 !important 覆盖） */
  body.tech .right-float-window { display: none !important; }
}

@media (max-width: 600px) {
  :root { --section-y: 52px; --header-h: 58px; }
  .th-hero { padding: 52px 0 56px; }
  .th-hero-title { font-size: 27px; }
  .th-hero--sm { padding: 26px 0 30px; }
  .th-hero--sm .th-hero-title { font-size: 20px; }
  .th-hero-tag { font-size: 12px; padding: 5px 13px; margin-bottom: 18px; }
  .th-hero-points { margin-top: 32px; gap: 0 22px; }
  .th-hero-points li { font-size: 13px; }
  .th-hero-actions .th-btn { flex: 1 1 auto; }
  .th-steps { grid-template-columns: 1fr; }
  .th-head-num { font-size: 28px; }
  .th-section-cta { flex-direction: column; }
  .th-stat-num { font-size: 34px; }
  .th-stat-unit { font-size: 18px; vertical-align: 4px; }
  .th-feature { padding: 30px 22px 26px; }
  .th-feature-icon { width: 56px; height: 56px; margin-bottom: 20px; }
  .th-feature-icon img { width: 28px; height: 28px; }
  body.tech .sign-model-three .item-wrap { grid-template-columns: 1fr; }
  body.tech .index-encapsulation .e-list { grid-template-columns: 1fr; }
  body.tech .index-partners .p-list { grid-template-columns: repeat(2, 1fr); }
  body.tech .index-releas .ms-btn-secondary,
  body.tech .index-encapsulation .ms-btn-secondary,
  body.tech .index-signature .row .con .img-wrap {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
  }
  body.tech .index-signature .row .con .img-wrap img {
    max-width: 72px;
    max-height: 72px;
  }
  body.tech .index-signature .more { width: 100%; margin-top: 32px; }
  .th-auth-card { padding: 30px 22px 26px; }
  .th-auth-brand { padding-top: 36px; }
  /* 验证码按钮：.input-lg 带 18px 字号，配上 main.css 固定的 27% 宽度在窄屏会撑破，小屏改为自适应 */
  .th-auth-card .verification-code .form-control { width: 60%; }
  .th-auth-card .verification-code .ms-btn {
    width: auto;
    max-width: 38%;
    height: 46px;
    line-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
  .th-auth-card .verification-code img { height: 46px; }
  body.tech .index-common > h4 { margin-bottom: 32px !important; font-size: 14px; }
}