/*
 * 系统架构图的实现层：仅由 system-architecture.html 加载。
 * 与功能模块图只共享 diagram.css 中的页面壳和排版原语；树、索引、边界及移动端均独立。
 */
.architecture-page {
  --architecture-tier-gap: 1.4rem;
  --architecture-frame: rgb(84 99 91 / 22%);
  --architecture-frame-fill: rgb(251 250 246 / 7%);
  --architecture-connector-color: #687c72;
  --architecture-connector: 1px solid var(--architecture-connector-color);
  --architecture-card-background:
    radial-gradient(circle at 15% 16%, rgb(164 163 147 / 34%), transparent 55%),
    linear-gradient(100deg, #aeb6a8 0%, #c3c8b9 31%, #d7d7ca 61.8%, #ebe7dd 100%);
  --architecture-card-border: rgb(78 96 86 / 38%);
}

.architecture-page .diagram-main,
.architecture-page .diagram-footer {
  width: min(100% - 3rem, 64rem);
}

.architecture-page .diagram-main {
  padding-bottom: 2.5rem;
}

.architecture-page .diagram-footer {
  margin-top: .75rem;
  padding-top: .8rem;
}

.architecture-page .diagram-intro {
  max-width: none;
  text-align: center;
}

.architecture-page .diagram-summary {
  margin-inline: auto;
}

.architecture-page .diagram-statline,
.architecture-page .diagram-reading-note {
  justify-content: center;
  text-align: center;
}

.architecture-page #architecture-root,
.architecture-page .diagram-vertical-flow {
  margin-top: 1rem;
}

.architecture-page .diagram-reading-note {
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: .65rem .9rem;
}

.architecture-page .flow-cue {
  padding: 0;
  border: 0;
  background: transparent;
}

.architecture-page :is(
  .architecture-root-node,
  .architecture-entrance-node,
  .architecture-gateway-node,
  .architecture-domain-node,
  .architecture-service-node,
  .architecture-mobile-card
) {
  border: 1px solid var(--architecture-card-border);
  background: var(--architecture-card-background);
}

.architecture-page :is(
  .architecture-root-node > span,
  .architecture-entrance-node > span,
  .architecture-mobile-root-card > span,
  .architecture-mobile-entrance-card > span
) {
  color: #74837b;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* 桌面拓扑：真实扇出与汇入关系。 */
.architecture-page .architecture-tree {
  --root-tier-gap: var(--architecture-tier-gap);
  padding: 1.4rem;
}

.architecture-page .architecture-tree-canvas {
  min-width: 0;
  border: 0;
  background: transparent;
}

.architecture-page .architecture-mobile-canvas {
  display: none;
}

.architecture-page .architecture-root-node {
  width: min(100%, 18rem);
  margin-inline: auto;
  padding: 1rem 1.15rem;
  text-align: center;
}

.architecture-page .architecture-root-node h2 {
  margin: .32rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.38rem;
  font-weight: 500;
}

.architecture-page .architecture-root-node p {
  margin: .42rem 0 0;
  color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .58rem;
}

.architecture-page .architecture-entrances,
.architecture-page .architecture-owner-branches {
  display: grid;
  align-items: start;
}

.architecture-page .architecture-entrances {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.architecture-page .architecture-entrance-node {
  position: relative;
  z-index: 1;
  width: min(100%, 14rem);
  min-height: 8.2rem;
  margin-inline: auto;
  padding: .88rem 1rem;
  text-align: center;
}

.architecture-page .architecture-entrance-node h2 {
  margin: .3rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 500;
}

.architecture-page .architecture-entrance-node p {
  margin: .4rem 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .53rem;
  line-height: 1.45;
}

.architecture-page .architecture-entrance-node small {
  display: block;
  margin-top: .45rem;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: .6rem;
  line-height: 1.55;
}

.architecture-page .architecture-merge {
  --architecture-merge-gap: 1.15rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--architecture-merge-gap);
  height: calc(var(--architecture-tier-gap) * 2);
}

.architecture-page .architecture-merge > span {
  position: relative;
}

.architecture-page .architecture-merge > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--architecture-tier-gap);
  border-left: var(--architecture-connector);
}

.architecture-page .architecture-merge > span::after {
  content: "";
  position: absolute;
  top: var(--architecture-tier-gap);
  border-top: var(--architecture-connector);
}

.architecture-page .architecture-merge > span:first-child::after {
  right: calc(var(--architecture-merge-gap) / -2);
  left: 50%;
}

.architecture-page .architecture-merge > span:last-of-type::after {
  right: 50%;
  left: calc(var(--architecture-merge-gap) / -2);
}

.architecture-page .architecture-merge > i {
  position: absolute;
  top: var(--architecture-tier-gap);
  bottom: 0;
  left: 50%;
  border-left: var(--architecture-connector);
}

.architecture-page .architecture-branch {
  --architecture-branch-gap: .65rem;
  --architecture-branch-height: 1.95rem;
  --architecture-branch-midpoint: calc(var(--architecture-branch-height) / 2);
  position: relative;
  display: grid;
  gap: var(--architecture-branch-gap);
  min-width: 0;
  height: var(--architecture-branch-height);
}

.architecture-page .architecture-branch--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.architecture-page .architecture-branch > span {
  position: relative;
  min-width: 0;
}

.architecture-page .architecture-branch > span::after {
  content: "";
  position: absolute;
  top: var(--architecture-branch-midpoint);
  height: 0;
  border-top: var(--architecture-connector);
}

.architecture-page .architecture-branch > span:first-child::after {
  right: calc(var(--architecture-branch-gap) / -2);
  left: 50%;
}

.architecture-page .architecture-branch > span:last-child::after {
  right: 50%;
  left: calc(var(--architecture-branch-gap) / -2);
}

.architecture-page .architecture-branch > span:nth-child(n + 2):not(:last-child)::after {
  right: calc(var(--architecture-branch-gap) / -2);
  left: calc(var(--architecture-branch-gap) / -2);
}

.architecture-page .architecture-branch i {
  position: absolute;
  top: var(--architecture-branch-midpoint);
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: var(--architecture-connector);
  transform: translateX(-50%);
}

.architecture-page .architecture-root-branch {
  --architecture-branch-gap: 1.15rem;
  --architecture-branch-height: calc(var(--root-tier-gap) * 2);
  --architecture-branch-midpoint: var(--root-tier-gap);
}

.architecture-page .architecture-root-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--architecture-branch-midpoint);
  border-left: var(--architecture-connector);
  transform: translateX(-50%);
}

.architecture-page .architecture-gateway-node,
.architecture-page .architecture-domain-node,
.architecture-page .architecture-service-node {
  position: relative;
  z-index: 1;
  text-align: center;
}

.architecture-page .architecture-gateway-node {
  width: min(100%, 24rem);
  margin-inline: auto;
  padding: .9rem 1rem;
}

.architecture-page .architecture-entrance-node::before,
.architecture-page .architecture-gateway-node::before,
.architecture-page .architecture-domain-node::before {
  content: "";
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  top: -7.24px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-right: var(--architecture-connector);
  border-bottom: var(--architecture-connector);
  transform: rotate(45deg);
}

.architecture-page .architecture-gateway-node > span,
.architecture-page .architecture-gateway-node > small {
  color: #5e7067;
  font-size: .58rem;
}

.architecture-page .architecture-gateway-node h2 {
  margin: .3rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
}

.architecture-page .architecture-gateway-node p {
  margin: .38rem 0 .25rem;
  color: #4f6359;
  font-size: .66rem;
}

.architecture-page .architecture-owner-split {
  --architecture-branch-gap: .65rem;
  --architecture-branch-height: calc(var(--architecture-tier-gap) * 2);
  --architecture-branch-midpoint: var(--architecture-tier-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.architecture-page .architecture-owner-split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: var(--architecture-branch-midpoint);
  border-left: var(--architecture-connector);
  transform: translateX(-50%);
}

.architecture-page .architecture-owner-split > span:nth-child(2)::after,
.architecture-page .architecture-owner-split > span:nth-child(3)::after {
  right: calc(var(--architecture-branch-gap) / -2);
  left: calc(var(--architecture-branch-gap) / -2);
}

.architecture-page .architecture-owner-branches {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

/* 一层透明框只表达同级所有权分组；内部节点仍是唯一实体卡片。 */
.architecture-page .architecture-owner-branch {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: .9rem .65rem .7rem;
  border: 1px solid var(--architecture-frame);
  background: var(--architecture-frame-fill);
}

.architecture-page .architecture-owner-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: .9rem;
  border-left: var(--architecture-connector);
  transform: translateX(-50%);
}

.architecture-page .architecture-domain-node {
  width: 100%;
  min-height: 3.7rem;
  margin-inline: auto;
  padding: .72rem .55rem;
}

.architecture-page .architecture-domain-node span {
  color: var(--vermillion);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .5rem;
}

.architecture-page .architecture-domain-node h3 {
  margin: .2rem 0 0;
  font-family: var(--font-serif);
  font-size: .86rem;
  font-weight: 500;
}

.architecture-page .architecture-service-list {
  position: relative;
  display: grid;
  gap: .9rem;
  margin-top: .9rem;
}

.architecture-page .architecture-service-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -.9rem;
  left: 50%;
  height: .9rem;
  border-left: var(--architecture-connector);
  transform: translateX(-50%);
}

.architecture-page .architecture-service-node {
  min-width: 0;
  min-height: 6.9rem;
  padding: .65rem .55rem;
}

.architecture-page .architecture-service-node h4,
.architecture-page .architecture-mobile-service-card h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: .88rem;
  font-weight: 500;
}

.architecture-page .architecture-service-node p,
.architecture-page .architecture-mobile-service-card p {
  margin: .36rem 0 0;
  color: #50635a;
  font-size: .56rem;
  line-height: 1.5;
}

.architecture-page :is(
  .architecture-service-node,
  .architecture-mobile-service-card
) :is(strong, small) {
  display: block;
  overflow-wrap: anywhere;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .48rem;
  font-weight: 500;
}

.architecture-page :is(
  .architecture-service-node,
  .architecture-mobile-service-card
) strong {
  margin-top: .42rem;
  color: #435b50;
}

.architecture-page :is(
  .architecture-service-node,
  .architecture-mobile-service-card
) small {
  margin-top: .28rem;
  padding-top: .28rem;
  border-top: 1px dotted var(--architecture-card-border);
  color: var(--ink-soft);
}

/* 架构索引与边界：不复用功能图的 ownership/principle 内容类。 */
.architecture-page .architecture-index,
.architecture-page .architecture-principle-section {
  position: relative;
  margin-top: 2.5rem;
  padding-top: .7rem;
  border-top: 0;
  text-align: center;
}

.architecture-page .architecture-index::before,
.architecture-page .architecture-principle-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2rem;
  left: 2rem;
  border-top: 1px solid var(--line-strong);
}

.architecture-page .architecture-index > header {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  text-align: center;
}

.architecture-page .architecture-index > header .diagram-eyebrow {
  box-sizing: border-box;
  width: calc(100% - 4rem);
  margin: 0 auto;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line-strong);
}

.architecture-page .architecture-index > header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  font-weight: 400;
  white-space: nowrap;
}

.architecture-page .architecture-index > header > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.65;
}

.architecture-page .architecture-collaboration-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}

.architecture-page .architecture-foundation-label {
  margin: 1.4rem 0 .7rem;
}

.architecture-page .architecture-foundation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-top: 1rem;
}

.architecture-page .architecture-index-card {
  min-width: 0;
  padding: .62rem .7rem;
  border: 1px solid var(--architecture-card-border);
  background: var(--architecture-card-background);
  text-align: center;
}

.architecture-page .architecture-index-row {
  min-height: 5.6rem;
}

.architecture-page .architecture-index-card span,
.architecture-page .architecture-index-card strong {
  display: block;
}

.architecture-page .architecture-index-card span {
  font-family: var(--font-serif);
  font-size: .7rem;
}

.architecture-page .architecture-index-card strong {
  margin-top: .25rem;
  overflow-wrap: anywhere;
  color: #50675c;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .52rem;
  font-weight: 500;
  line-height: 1.55;
}

.architecture-page .architecture-principle-section {
  margin-top: 1.5rem;
}

.architecture-page .architecture-principle-section .diagram-eyebrow {
  margin-bottom: .7rem;
}

.architecture-page .architecture-principle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0 2rem;
  list-style: none;
  counter-reset: architecture-principle;
}

.architecture-page .architecture-principle-list li {
  padding: .8rem 1.2rem;
  border-top: 1px solid var(--line);
  color: #53625b;
  font-family: var(--font-serif);
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  counter-increment: architecture-principle;
}

.architecture-page .architecture-principle-list li::before {
  content: counter(architecture-principle, decimal-leading-zero);
  display: block;
  margin-bottom: .35rem;
  color: var(--vermillion);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .62rem;
}

@media (max-width: 980px) {
  .architecture-page .architecture-foundation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .architecture-page .diagram-main,
  .architecture-page .diagram-footer {
    width: min(100% - 1.5rem, 64rem);
  }

  /*
   * 移动端使用独立架构树；桌面拓扑完全退出排版。
   * 这里不压缩桌面网格，也不复用功能图的移动类名或连接器。
   */
  .architecture-page .architecture-tree-canvas {
    display: none;
  }

  .architecture-page .architecture-mobile-canvas {
    display: block;
  }

  .architecture-page .architecture-mobile-tree {
    display: grid;
    justify-items: center;
    width: 100%;
    padding: .8rem 0;
  }

  .architecture-page .architecture-mobile-card {
    position: relative;
    z-index: 1;
    min-width: 0;
    text-align: center;
  }

  .architecture-page .architecture-mobile-root-card,
  .architecture-page .architecture-mobile-gateway-card {
    width: min(100%, 18rem);
    padding: 1rem 1.15rem;
  }

  .architecture-page .architecture-mobile-root-card h2,
  .architecture-page .architecture-mobile-gateway-card h2 {
    margin: .32rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.38rem;
    font-weight: 500;
  }

  .architecture-page .architecture-mobile-root-card p {
    margin: .42rem 0 0;
    color: var(--ink-soft);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .58rem;
  }

  .architecture-page .architecture-mobile-connector {
    position: relative;
    width: 0;
    height: 1.45rem;
    margin-inline: auto;
    border-left: var(--architecture-connector);
  }

  .architecture-page .architecture-mobile-connector::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    bottom: 1.24px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-right: var(--architecture-connector);
    border-bottom: var(--architecture-connector);
    transform: rotate(45deg);
  }

  .architecture-page .architecture-mobile-entrance-tier,
  .architecture-page .architecture-mobile-owner-tier {
    display: grid;
    justify-items: center;
    width: min(100%, 20rem);
    padding: .72rem;
    border: 1px solid var(--architecture-frame);
    background: var(--architecture-frame-fill);
  }

  .architecture-page .architecture-mobile-entrance-tier {
    gap: .72rem;
  }

  .architecture-page .architecture-mobile-entrance-card {
    width: 100%;
    min-height: 7.25rem;
    padding: .85rem 1rem;
  }

  .architecture-page .architecture-mobile-entrance-card h2 {
    margin: .3rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 500;
  }

  .architecture-page .architecture-mobile-entrance-card p {
    margin: .4rem 0 0;
    color: var(--ink-soft);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .53rem;
  }

  .architecture-page .architecture-mobile-entrance-card small {
    display: block;
    margin-top: .45rem;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-size: .6rem;
    line-height: 1.55;
  }

  .architecture-page .architecture-mobile-gateway-card > span,
  .architecture-page .architecture-mobile-gateway-card > small {
    color: #5e7067;
    font-size: .58rem;
  }

  .architecture-page .architecture-mobile-gateway-card p {
    margin: .38rem 0 .25rem;
    color: #4f6359;
    font-size: .66rem;
  }

  .architecture-page .architecture-mobile-owner-tier {
    gap: 2rem;
    width: min(100%, 21rem);
    padding: .8rem;
  }

  .architecture-page .architecture-mobile-owner-group {
    display: grid;
    justify-items: center;
    width: 100%;
    min-width: 0;
  }

  .architecture-page .architecture-mobile-domain-heading {
    width: min(100%, 16rem);
    padding: .1rem .5rem .65rem;
    border-bottom: 1px solid var(--architecture-frame);
    text-align: center;
  }

  .architecture-page .architecture-mobile-domain-heading span {
    color: var(--vermillion);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .5rem;
  }

  .architecture-page .architecture-mobile-domain-heading h3 {
    margin: .2rem 0 0;
    font-family: var(--font-serif);
    font-size: .96rem;
    font-weight: 500;
  }

  .architecture-page .architecture-mobile-service-tier {
    display: grid;
    gap: .72rem;
    width: 100%;
    margin-top: .72rem;
  }

  .architecture-page .architecture-mobile-service-card {
    width: 100%;
    min-height: 6.4rem;
    padding: .72rem .65rem;
  }

  .architecture-page .architecture-index::before,
  .architecture-page .architecture-principle-section::before {
    right: .8rem;
    left: .8rem;
  }

  .architecture-page .architecture-index > header .diagram-eyebrow {
    width: calc(100% - 1.6rem);
  }

  .architecture-page .architecture-principle-list {
    grid-template-columns: 1fr;
    padding-inline: .8rem;
  }
}

@media (max-width: 480px) {
  .architecture-page .architecture-collaboration-index,
  .architecture-page .architecture-foundation-grid {
    grid-template-columns: 1fr;
    width: 61.8%;
    margin-inline: auto;
  }
}

@media print {
  .architecture-page .architecture-tree-canvas {
    display: block;
  }

  .architecture-page .architecture-mobile-canvas {
    display: none;
  }
}