/* =========================================================
   室内导航 - 场景体验对比（共用）
   前缀 sxnd-，避免与原站冲突
   宽度对齐原站 .main_center（63.64rem 等断点）
   ========================================================= */

.sxnd-scenario {
  --sxnd-blue: #2f7dff;
  --sxnd-blue-soft: #eaf2ff;
  --sxnd-blue-head: #f2f6ff;
  --sxnd-stack: #f5f8fd;
  --sxnd-text: #243447;
  --sxnd-sub: #4a5b70;
  --sxnd-line: #e3ecfb;
  --sxnd-gap: 10px;
  --sxnd-cols: 0.9fr 1.05fr 1.4fr 1.28fr 1.28fr 1.45fr;
  box-sizing: border-box;
  width: 100%;
  padding: 3.45rem 0 3.27rem;
  background: #ffffff;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--sxnd-text);
  -webkit-font-smoothing: antialiased;
}

.sxnd-scenario *,
.sxnd-scenario *::before,
.sxnd-scenario *::after {
  box-sizing: border-box;
}

/* 与原站 .main_center 同宽：63.64rem @ 默认 */
.sxnd-inner {
  width: 63.64rem;
  max-width: 100%;
  margin: 0 auto;
}

@media only screen and (max-width: 1680px) {
  .sxnd-inner { width: 58.2rem; }
}

@media only screen and (max-width: 1440px) {
  .sxnd-inner { width: 66rem; }
}

@media only screen and (max-width: 1280px) {
  .sxnd-inner { width: 55.6rem; }
}

@media only screen and (max-width: 768px) {
  .sxnd-scenario { padding: 40px 10px 48px; }
  .sxnd-inner { width: 100%; }
}

.sxnd-head {
  text-align: center;
  margin-bottom: 2rem;
}

.sxnd-en {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--sxnd-blue);
  font-weight: 500;
}

.sxnd-title {
  margin: 0;
  font-size: 1.82rem;
  font-weight: 700;
  line-height: 1.35;
  color: #111111;
}

.sxnd-underline {
  display: block;
  width: 2.2rem;
  height: 0.14rem;
  margin: 0.9rem auto 0;
  background: var(--sxnd-blue);
  border-radius: 2px;
}

.sxnd-table {
  width: 100%;
}

/* 表头：六列分开 */
.sxnd-thead {
  display: grid;
  grid-template-columns: var(--sxnd-cols);
  gap: var(--sxnd-gap);
  margin-bottom: var(--sxnd-gap);
}

.sxnd-th {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  min-height: 3.2rem;
  padding: 0.55rem 0.45rem;
  background: var(--sxnd-blue-head);
  border-radius: 0.55rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: #2c3a4f;
  text-align: center;
  line-height: 1.35;
}

.sxnd-th img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  flex-shrink: 0;
}

.sxnd-th-uwb {
  background: var(--sxnd-blue);
  color: #ffffff;
  box-shadow: 0 0.45rem 1.1rem rgba(47, 125, 255, 0.28);
}

.sxnd-star {
  position: absolute;
  top: -0.45rem;
  right: -0.36rem;
  width: 1.2rem !important;
  height: 1.2rem !important;
}

.sxnd-tbody {
  display: flex;
  flex-direction: column;
  gap: var(--sxnd-gap);
}

/* 每一角色组：六列分开（红框所示列间距） */
.sxnd-group {
  display: grid;
  grid-template-columns: var(--sxnd-cols);
  gap: var(--sxnd-gap);
  align-items: stretch;
}

.sxnd-role-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.3rem 0.55rem;
  background: var(--sxnd-blue-soft);
  border-radius: 0.55rem;
  text-align: center;
}

.sxnd-role-icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.sxnd-role-name {
  font-size: 0.72rem;
  font-weight: 650;
  color: #243447;
  line-height: 1.4;
}

/* 各列独立竖条 */
.sxnd-stack {
  display: flex;
  flex-direction: column;
  background: var(--sxnd-stack);
  border-radius: 0.55rem;
  overflow: hidden;
  min-width: 0;
}

.sxnd-stack-scenario,
.sxnd-stack-desc {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #eef2f8;
}

.sxnd-stack-beacon,
.sxnd-stack-aoa {
  background: var(--sxnd-stack);
}

.sxnd-stack-uwb {
  background: var(--sxnd-blue);
  color: #ffffff;
  box-shadow: 0 0.45rem 1.1rem rgba(47, 125, 255, 0.25);
}

.sxnd-cell {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.82rem 0.73rem;
  font-size: 0.73rem;
  line-height: 1.5;
  color: var(--sxnd-text);
  position: relative;
  justify-content: center;
}

.sxnd-cell:not(.is-last)::after {
  content: "";
  position: absolute;
  left: 0.73rem;
  right: 0.73rem;
  bottom: 0;
  height: 1px;
  background: var(--sxnd-line);
}

.sxnd-stack-uwb .sxnd-cell:not(.is-last)::after {
  background: rgba(255, 255, 255, 0.22);
}

.sxnd-cell-scenario {
  gap: 0.45rem;
  font-weight: 600;
}

.sxnd-arrow {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--sxnd-blue);
  position: relative;
}

.sxnd-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0.28rem;
  height: 0.28rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-60%, -50%) rotate(45deg);
}

.sxnd-cell-desc {
  color: var(--sxnd-sub);
}

.sxnd-cmp {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  justify-content: center;
}

.sxnd-icon-warn,
.sxnd-icon-check {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  object-fit: contain;
}

.sxnd-cmp-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sxnd-line {
  display: block;
}

.sxnd-stack-uwb .sxnd-line {
  color: #ffffff;
}

@media only screen and (max-width: 1100px) {
  .sxnd-th,
  .sxnd-cell {
    font-size: 0.68rem;
    padding: 0.64rem 0.5rem;
  }

  .sxnd-role-icon {
    width: 2rem;
    height: 2rem;
  }
}

@media only screen and (max-width: 900px) {
  .sxnd-title {
    font-size: 1.45rem;
  }

  .sxnd-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sxnd-thead,
  .sxnd-tbody {
    min-width: 58rem;
  }
}