/* 总工作台：始终铺满 console 可视区域。 */

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansSC-workbench.woff2") format("woff2");
  /* 字体默认按 hhea 指标排版（144.8% em）过高，会被卡片背景分色线遮住字符下半部分，改用更紧凑的 typo 指标 */
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

.main-content > main:has(> .wb-page) {
  overflow: hidden;
  background: #f5f9ff;
}

.wb-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 12% 60% 26%;
  row-gap: 1%;
  overflow: hidden;
  padding: 0 3.4%;
  padding-bottom: 16px;
  color: #111827;
  font-family: "Noto Sans SC", sans-serif;
  background: #f5f9ff
    url("../images/workbench/home/workbench-reference-background.png") center /
    100% 100% no-repeat;
}

.wb-page a {
  color: inherit;
  text-decoration: none;
}

.wb-brand {
  position: absolute;
  z-index: 3;
  top: 3.2%;
  left: 3%;
  width: clamp(112px, 8vw, 158px);
  height: auto;
}

.wb-hero {
  box-sizing: border-box;
  padding-top: clamp(14px, 1.8vh, 24px);
  text-align: center;
}

.wb-hero h1,
.wb-hero p,
.wb-capability-card h2,
.wb-knowledge-card h2,
.wb-expert-card h2 {
  margin: 0;
}

.wb-hero h1 {
  color: #070d1c;
  font-size: clamp(30px, 4.4vh, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.wb-hero p {
  margin-top: clamp(4px, 0.7vh, 8px);
  color: #0e1098;
  font-size: clamp(15px, 2.2vh, 24px);
  font-weight: bold;
  line-height: 1.35;
  /* background: linear-gradient( */
  /*   to bottom, */
  /*   #000 0%, */
  /*   #061d66 28%, */
  /*   #0946ff 62%, */
  /*   #0946ff 100% */
  /* ); */
  background: #0e1098;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wb-hero strong,
.wb-expert-title strong {
  color: #2451f4;
  font-weight: 800;
}

.wb-capability-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 0.8vw, 16px);
  transform: translateY(-1.2vh);
}

.wb-capability-card {
  position: relative;
  min-width: 0;
  height: 100%;
  display: block;
  overflow: visible;
  cursor: pointer;
  transition: transform 180ms ease-out;
}

.wb-capability-portrait-stage {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 35.5%;
  overflow: hidden;
}

.wb-capability-portrait {
  position: absolute;
  top: 78%;
  left: 50%;
  width: 120%;
  height: 140%;
  object-fit: contain;
  object-position: bottom center;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease-out;
}

.wb-capability-body {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64.5%;
  box-sizing: border-box;
  padding: clamp(8px, 1.1vh, 14px) clamp(12px, 1.25vw, 24px);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: clamp(16px, 2.2vh, 24px);
  background: #f3f7fc;
  box-shadow: 0 6px 12px rgba(28, 73, 134, 0.13);
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out;
}

.wb-capability-body::before {
  position: absolute;
  z-index: 0;
  top: 39%;
  right: clamp(8px, 0.6vw, 14px);
  bottom: clamp(7px, 0.8vh, 10px);
  left: clamp(8px, 0.6vw, 14px);
  border: 1px solid #e7eef8;
  border-radius: clamp(12px, 1.5vh, 18px);
  background-color: rgba(255, 255, 255, 0.62);
  content: "";
  transition:
    border-color 180ms ease-out,
    background-color 180ms ease-out;
}

.wb-capability-icon {
  display: block;
  width: clamp(48px, 7vh, 80px);
  height: clamp(48px, 7vh, 80px);
  margin: 0 auto clamp(4px, 0.6vh, 7px);
  object-fit: contain;
}

.wb-capability-card h2 {
  color: #081c4f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  line-height: 31px;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.wb-capability-title-text {
  display: inline-block;
  filter: drop-shadow(0 2px 6px #fff);
  line-height: 1;
  background: linear-gradient(
    to bottom,
    #000 0%,
    #081c4f 32%,
    #06367a 66%,
    #0071eb 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.module-technical .wb-capability-title-text,
.module-collusion .wb-capability-title-text {
  background: linear-gradient(
    to bottom,
    #09113e 0%,
    #2c0935 52%,
    #6c0000 80%,
    #ce4c01 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.wb-capability-hot-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.wb-capability-card ol,
.wb-knowledge-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wb-item;
}

.wb-capability-card ol {
  position: absolute;
  z-index: 1;
  top: 43%;
  right: clamp(12px, 1.25vw, 24px);
  bottom: calc(clamp(14px, 1.8vh, 20px) + clamp(24px, 2.5vh, 28px) + 4px);
  left: clamp(12px, 1.25vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wb-capability-card li,
.wb-knowledge-card li {
  position: relative;
  padding-left: clamp(18px, 1.2vw, 24px);
  color: #212d40;
  font-size: clamp(12px, 1.55vh, 17px);
  line-height: 1.9;
}

.wb-capability-card ol:has(li:nth-child(5)) li {
  line-height: 1.4;
}

.wb-capability-card li::before,
.wb-knowledge-card li::before {
  position: absolute;
  left: 0;
  color: inherit;
  content: counter(wb-item) "\3001";
  counter-increment: wb-item;
  font-variant-numeric: tabular-nums;
}

.wb-capability-action {
  position: absolute;
  z-index: 1;
  bottom: clamp(14px, 1.8vh, 20px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: clamp(62px, 3.7vw, 74px);
  height: clamp(24px, 2.5vh, 28px);
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 29px;
  background: linear-gradient(270deg, #3a3cff 0%, #1270ff 100%);
  color: #fff;
  font-size: clamp(10px, 1.1vh, 12px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background-color 180ms ease-out;
}

.wb-capability-action span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 400;
}

.module-technical .wb-capability-action.is-hot {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    115deg,
    #174ef5 0%,
    #3a3cff 28%,
    #1270ff 55%,
    #5b8cff 78%,
    #174ef5 100%
  );
  background-size: 220% 100%;
  animation: wb-hot-action-flow 2.8s linear infinite;
  box-shadow: 0 4px 14px rgba(18, 112, 255, 0.28);
}

.module-technical .wb-capability-action.is-hot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: wb-hot-action-shine 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wb-hot-action-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes wb-hot-action-shine {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -20% 0;
  }
}

.wb-capability-card:not(.is-coming):hover .wb-capability-body,
.wb-capability-card:not(.is-coming):focus-visible .wb-capability-body {
  border-color: #fff;
  box-shadow: 0 9px 12px rgba(9, 70, 255, 0.2);
}

.wb-capability-card:not(.is-coming):hover .wb-capability-body::before,
.wb-capability-card:not(.is-coming):focus-visible .wb-capability-body::before {
  border-color: #d6e3fa;
  background-color: rgba(255, 255, 255, 0.82);
}

.wb-capability-card:not(.is-coming):hover,
.wb-capability-card:not(.is-coming):focus-visible {
  transform: translateY(-5px);
}

.wb-capability-card:not(.is-coming):active {
  transform: translateY(-1px);
}

.wb-capability-card:hover .wb-capability-portrait,
.wb-capability-card:focus-visible .wb-capability-portrait {
  transform: translate(-50%, calc(-50% - 3px));
}

.wb-capability-card:hover .wb-capability-action:not(.is-hot),
.wb-capability-card:focus-visible .wb-capability-action:not(.is-hot) {
  background: linear-gradient(270deg, #3a3cff 0%, #1270ff 100%);
}

.wb-capability-card:focus-visible,
.wb-knowledge-card:focus-visible {
  outline: 2px solid #174ef5;
  outline-offset: 2px;
}

.wb-capability-card.is-coming {
  cursor: default;
}

.wb-capability-card.is-coming .wb-capability-icon {
  filter: grayscale(1) opacity(0.68);
}

.wb-capability-card.is-coming .wb-capability-body {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.wb-capability-card.is-coming .wb-capability-action {
  background: #b7c0d1;
}

.wb-capability-card.is-coming:hover .wb-capability-portrait,
.wb-capability-card.is-coming:focus-visible .wb-capability-portrait {
  transform: translate(-50%, -50%);
}

.wb-capability-card.is-coming:hover .wb-capability-action,
.wb-capability-card.is-coming:focus-visible .wb-capability-action {
  background: #b7c0d1;
}

.wb-support-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 0.8vw, 16px);
}

.wb-knowledge-card,
.wb-expert-card {
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 24px;
  background-color: #f6f9fd;
  box-shadow: 0 3px 13px #e4ecf7;
}

.wb-knowledge-card {
  padding: clamp(12px, 1.7vh, 20px) clamp(22px, 2.5vw, 48px);
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out;
}

.wb-knowledge-card:hover {
  border-color: #c8d6ff;
  box-shadow: 0 3px 13px #dbe6f5;
}

.wb-expert-card {
  padding: clamp(12px, 1.7vh, 20px) clamp(20px, 2.2vw, 42px);
  background-image: url("../images/workbench/home/expert-card-background.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: clamp(180px, 12vw, 230px) auto;
}

.wb-knowledge-title,
.wb-expert-title {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 15px);
}

.wb-knowledge-icon,
.wb-expert-title img {
  flex: 0 0 auto;
  width: clamp(44px, 5.8vh, 66px);
  height: clamp(42px, 5.4vh, 62px);
  object-fit: contain;
}

.wb-knowledge-card h2,
.wb-expert-card h2 {
  color: #091939;
  font-size: clamp(20px, 2.7vh, 30px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.wb-knowledge-bar {
  min-width: 0;
  flex: 1;
  height: 10px;
  margin-left: 4px;
  object-fit: fill;
}

.wb-knowledge-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: clamp(72px, 4.5vw, 88px);
  height: clamp(30px, 3.2vh, 36px);
  box-sizing: border-box;
  margin-left: 8px;
  padding: 0 14px;
  border-radius: 29px;
  background: linear-gradient(270deg, #3a3cff 0%, #1270ff 100%);
  color: #fff;
  font-size: clamp(12px, 1.3vh, 14px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.wb-knowledge-action span {
  font-size: 13px;
  font-weight: 400;
}

.wb-knowledge-content {
  display: grid;
  grid-template-columns: 1fr clamp(95px, 8vw, 150px) 1fr;
  gap: clamp(10px, 1vw, 20px);
  align-items: center;
  margin-top: clamp(4px, 0.6vh, 8px);
}

.wb-knowledge-card li {
  padding-left: clamp(18px, 1.2vw, 24px);
  font-size: clamp(12px, 1.55vh, 17px);
  line-height: 1.65;
  white-space: nowrap;
}

.wb-knowledge-list-continued {
  counter-reset: wb-item 3;
}

.wb-knowledge-image img {
  display: block;
  width: clamp(88px, 8vw, 145px);
  height: clamp(88px, 8vw, 145px);
  margin: 0 auto;
  object-fit: contain;
}

.wb-expert-title strong {
  margin-right: 3px;
  font-size: 1.22em;
  font-style: italic;
}

.wb-expert-process {
  margin-top: clamp(10px, 1.5vh, 18px);
}

.wb-expert-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.wb-expert-step {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(4px, 0.5vh, 7px);
}

.wb-flow-icon,
.wb-flow-icon img {
  width: clamp(38px, 5vh, 58px);
  height: clamp(38px, 5vh, 58px);
}

.wb-flow-icon {
  display: grid;
  place-items: center;
}

.wb-flow-icon img {
  object-fit: contain;
}

.wb-flow-label {
  color: #212d40;
  font-size: clamp(12px, 1.45vh, 16px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.wb-flow-arrow {
  width: 38px;
  margin-top: clamp(14px, 2vh, 23px);
}

.wb-flow-arrow img {
  display: block;
  width: 100%;
  height: 10px;
  object-fit: fill;
}

@media (max-width: 1180px) {
  .wb-page {
    padding-right: 2%;
    padding-left: 2%;
  }

  .wb-capability-grid {
    gap: 8px;
  }

  .wb-capability-body {
    padding-right: 10px;
    padding-left: 10px;
  }

  .wb-capability-card ol {
    right: 10px;
    left: 10px;
  }

  .wb-capability-card li {
    padding-left: 17px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-capability-card,
  .wb-capability-portrait,
  .wb-capability-body,
  .wb-capability-body::before,
  .wb-capability-action,
  .wb-knowledge-card {
    transition: none;
  }

  .module-technical .wb-capability-action.is-hot,
  .module-technical .wb-capability-action.is-hot::before {
    animation: none;
  }
}