/* RGYS / Interaction II — strong selection, quiet motion, deliberate action. */
:root {
  --action-navy: #0b303c;
  --action-deep: #143f4c;
  --action-gold: #ead5ad;
  --action-border: #bda276;
  --action-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}
a[href],
button:not(:disabled),
summary {
  cursor: pointer;
}
/* 01. 业务分流：完整等宽卡片，整块深海蓝选择，而非轻浮一条金线。 */
.boundary-grid {
  gap: 12px;
  border: 0;
  align-items: stretch;
}
.boundary-grid > a,
.boundary-grid > a:last-child,
.boundary-grid > a:nth-child(2) {
  margin: 0;
  padding: 27px 24px 23px;
  border: 1px solid #ced8d4;
  border-radius: 8px;
  background: #f8faf8;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  isolation: isolate;
  transition:
    background-color 0.24s var(--action-ease),
    border-color 0.24s,
    box-shadow 0.24s;
}
.boundary-grid > a:nth-child(-n + 2) {
  border-bottom: 1px solid #ced8d4;
}
.boundary-grid > a::before {
  content: none;
}
.boundary-grid .boundary-no {
  color: #577271;
  transition: color 0.2s;
}
.boundary-grid h3 {
  margin: 21px 0 12px;
  transition: color 0.2s;
}
.boundary-grid p {
  min-height: 0;
  flex: 1;
  margin-bottom: 28px;
  color: #52696d;
  transition: color 0.2s;
}
.boundary-grid .text-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #d7dfd9;
  color: #234b55;
  text-decoration: none;
  font-weight: 600;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.boundary-grid .text-link::after {
  content: "↗";
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9e4d7;
  color: #234b55;
  font-size: 20px;
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.boundary-grid > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: var(--action-navy);
  border-color: var(--action-navy);
  box-shadow: 0 10px 25px #0b303c20;
}
.boundary-grid
  > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed)
  .boundary-no {
  color: #dfc69b;
}
.boundary-grid > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) h3 {
  color: #fff;
}
.boundary-grid > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) p {
  color: #d7e4e7;
}
.boundary-grid
  > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed)
  .text-link {
  color: #f1deb9;
  border-color: #ffffff38;
}
.boundary-grid
  > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed)
  .text-link::after {
  background: #ead5ad;
  color: #0b303c;
  transform: translateX(2px);
}
/* 02. 四服务：静态白底，编号和方向均有明确位置；激活是完整服务块。 */
.route-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 0;
  gap: 5px;
}
.route-link,
.route-link:first-child,
.route-link:last-child {
  padding: 19px 18px;
  gap: 12px;
  border: 0;
  border-radius: 7px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  transition:
    background-color 0.22s var(--action-ease),
    box-shadow 0.22s;
}
.route-link b {
  font-size: 25px;
  color: #a48350;
  transition: color 0.2s;
  flex-shrink: 0;
}
.route-link > div {
  min-width: 0;
  flex: 1;
}
.route-link strong {
  font-size: 14px;
  line-height: 1.6;
  transition: color 0.2s;
}
.route-link small {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 3px;
  color: #657a7f;
  transition: color 0.2s;
}
.route-link::after {
  content: "↗";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #d8ded8;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: #395a61;
  background: #f7f8f3;
  position: static;
  margin: 0;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}
.route-link:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: var(--action-navy);
  box-shadow: 0 5px 17px #0b303c17;
}
.route-link:is(.is-pointer-over, :focus-visible, .is-touch-pressed) strong {
  color: #fff;
}
.route-link:is(.is-pointer-over, :focus-visible, .is-touch-pressed) small {
  color: #d2e1e5;
}
.route-link:is(.is-pointer-over, :focus-visible, .is-touch-pressed) b {
  color: #e3c89a;
}
.route-link:is(.is-pointer-over, :focus-visible, .is-touch-pressed)::after {
  background: #ead5ad;
  border-color: #ead5ad;
  color: #0b303c;
  transform: translateX(2px);
}
/* 03. 二级导航：有热区的圆角标签，激活态用深蓝白字，而非细微下划线。 */
.subnav-links {
  gap: 7px;
  padding-block: 7px;
}
.subnav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  min-height: 34px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 11px;
  line-height: 1.5;
  color: #34565e;
  background: transparent;
  transition:
    background-color 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.subnav-links a::after {
  content: none;
}
.subnav-links a[aria-current="page"] {
  background: #e7ecdf;
  border-color: #c6d0c5;
  color: #20424e;
  font-weight: 600;
}
.subnav-links a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: var(--action-navy);
  color: #fff;
  border-color: var(--action-navy);
}
/* 04. 图文卡：保持内容白底；入口条的深蓝状态才是动作重点。 */
a:is(.service-card, .article-card, .topic-card, .guide-entry, .chapter-link),
.search-results a {
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.22s,
    box-shadow 0.22s,
    background-color 0.22s;
}
a:is(.service-card, .article-card, .topic-card, .guide-entry, .chapter-link):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  ),
.search-results a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  border-color: #8da3a6;
  box-shadow: 0 9px 26px #0b303c1c;
  background: #fff;
  transform: none;
}
a:is(.service-card, .article-card, .topic-card, .guide-entry, .chapter-link)
  h3 {
  transition: color 0.2s;
}
a:is(.service-card, .article-card, .topic-card, .guide-entry, .chapter-link):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  )
  h3 {
  color: #215b6d;
}
a:is(.service-card, .article-card, .topic-card) .text-link {
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid #dae1da;
  border-radius: 5px;
  background: #f2f5f0;
  color: #274d58;
  display: flex;
  justify-content: space-between;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
a:is(.service-card, .article-card, .topic-card) .text-link::after {
  color: inherit;
  transition: transform 0.2s;
}
a:is(.service-card, .article-card, .topic-card):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  )
  .text-link {
  background: var(--action-navy);
  color: #f4e4c4;
  border-color: var(--action-navy);
}
a:is(.service-card, .article-card, .topic-card):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  )
  .text-link::after {
  transform: translateX(2px);
}
.service-card:hover,
.country-card:hover {
  transform: none;
}
.service-card:hover img {
  transform: none;
}
/* 阅读清单、目录、非整卡链接：边框层次，不把静态卡片冒充链接。 */
.reading-links a {
  padding: 23px 18px;
  border-radius: 6px;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}
.reading-links h3,
.reading-links p,
.reading-links .n {
  transition: color 0.2s;
}
.reading-links .arrow {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8ece5;
  color: #315663;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.reading-links a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: var(--action-navy);
  box-shadow: 0 7px 20px #0b303c17;
}
.reading-links a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) h3 {
  color: #fff;
}
.reading-links a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) p {
  color: #d4e1e4;
}
.reading-links a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) .n {
  color: #e4cea9;
}
.reading-links
  a:is(.is-pointer-over, :focus-visible, .is-touch-pressed)
  .arrow {
  background: #ead5ad;
  color: #0b303c;
}
:is(.detail-nav, .chapter-nav, .mobile-chapters) a:not(.btn),
.related-reading a,
.region-chips a {
  border-radius: 4px;
  transition:
    background-color 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}
:is(.detail-nav, .chapter-nav, .mobile-chapters)
  a:not(.btn):is(.is-pointer-over, :focus-visible, .is-touch-pressed),
.related-reading a:is(.is-pointer-over, :focus-visible, .is-touch-pressed),
.region-chips a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: #e5ede8;
  color: #153f4b;
  box-shadow: inset 3px 0 #537480;
}
.country-card,
.network-card,
.related-card,
.resource-row {
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
:is(.country-card, .network-card, .related-card, .resource-row):has(
  a:is(.is-pointer-over, :focus-visible)
) {
  border-color: #91a9ad;
  box-shadow: 0 4px 16px #0b303c12;
}
/* 常规文本链接：只加清楚的色彩与下划线，不抬升正文。 */
a.text-link,
.sources a,
.source-inline,
:is(.content-section, .guide-chapter, .legal, .faq-answer) p a,
:is(.country-card, .network-card, .related-card, .office, .contact-item) a,
.breadcrumb a,
.footer-grid a:not(.brand),
.footer-bottom a,
.topline a {
  transition:
    color 0.18s,
    text-decoration-color 0.18s;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
a.text-link:is(.is-pointer-over, :focus-visible),
.sources a:is(.is-pointer-over, :focus-visible),
.source-inline:is(.is-pointer-over, :focus-visible),
:is(.content-section, .guide-chapter, .legal, .faq-answer)
  p
  a:is(.is-pointer-over, :focus-visible),
:is(.country-card, .network-card, .related-card, .office, .contact-item)
  a:is(.is-pointer-over, :focus-visible),
.breadcrumb a:is(.is-pointer-over, :focus-visible),
.footer-grid a:not(.brand):is(.is-pointer-over, :focus-visible),
.footer-bottom a:is(.is-pointer-over, :focus-visible),
.topline a:is(.is-pointer-over, :focus-visible) {
  text-decoration: underline;
  color: #216174;
}
.site-footer a:is(.is-pointer-over, :focus-visible),
.topline a:is(.is-pointer-over, :focus-visible),
.breadcrumb a:is(.is-pointer-over, :focus-visible) {
  color: #f1d7a9;
}
/* 05. 主导航：不要滑过就突然弹开，用短停留+位置平稳的菜单。 */
.nav-folder > summary {
  border-radius: 4px;
  transition:
    color 0.18s,
    background-color 0.18s;
}
.nav-folder > summary::after {
  display: inline-block;
  transition: transform 0.2s;
}
.nav-folder[open] > summary::after {
  transform: rotate(180deg);
}
.nav-folder > summary:is(.is-pointer-over, :focus-visible),
.nav-folder[open] > summary {
  color: #236074;
}
.nav-folder[open] .nav-panel {
  animation: menu-reveal 0.2s var(--action-ease) both;
}
.nav-panel {
  border-radius: 8px;
  border-top: 3px solid #537480;
}
.nav-panel > a {
  border-radius: 5px;
  transition:
    background-color 0.18s,
    border-color 0.18s;
}
.nav-panel > a:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: #e5eee9;
  border-color: #87a3a7;
}
.nav-panel > a span {
  color: #526e75;
}
@keyframes menu-reveal {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
/* 06. FAQ与按钮：有明确激活状态，不让全页都在上下跳动。 */
:is(.faq-list, .faq-entry, .mobile-chapters) summary {
  border-radius: 5px;
  transition:
    background-color 0.18s,
    color 0.18s;
}
:is(.faq-list, .faq-entry, .mobile-chapters)
  summary:is(.is-pointer-over, :focus-visible, .is-touch-pressed),
.faq-entry[open] > summary {
  background: #e6eee9;
  color: #153f4b;
}
.faq-entry summary::after,
.faq-list summary::after {
  color: #436a77;
}
.faq-entry {
  border-radius: 7px;
  overflow: hidden;
}
.faq-entry[open] {
  border-color: #8aa4a7;
}
.btn,
.chip,
.pager button,
.service-selector button,
.icon-button,
.dialog-header button,
.play {
  transition:
    background-color 0.18s,
    color 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.btn:hover {
  transform: none;
}
.btn:is(.is-pointer-over, :focus-visible, .is-touch-pressed):not(:disabled) {
  background: #e7ce9e;
  color: #0b303c;
  box-shadow: 0 5px 17px #0b303c20;
}
.btn.navy:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: #215b6d;
  border-color: #215b6d;
  color: #fff;
}
.btn:is(.light-outline, .outline):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  ) {
  background: #215b6d;
  border-color: #215b6d;
  color: #fff;
}
:is(.chip, .pager button, .service-selector button):is(
    .is-pointer-over,
    :focus-visible,
    .is-touch-pressed
  ):not(:disabled) {
  background: #215263;
  color: #fff;
  border-color: #215263;
  box-shadow: 0 3px 10px #0b303c14;
}
:is(.chip.active, .service-selector button.selected) {
  background: var(--action-navy);
  color: #fff;
}
.icon-button:is(.is-pointer-over, :focus-visible, .is-touch-pressed):not(
    :disabled
  ) {
  background: #e5ede8;
  color: #1d5365;
  border-radius: 5px;
}
.dialog-header button:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: #ffffff25;
}
.play:is(.is-pointer-over, :focus-visible, .is-touch-pressed) {
  background: #ead5ad;
  color: #0b303c;
  box-shadow: 0 0 0 6px #ffffff15;
}
.media-play {
  transition: background-color 0.2s;
}
.media-play > span {
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.media-play:is(.is-pointer-over, :focus-visible, .is-touch-pressed) > span {
  background: #ead5ad;
  color: #0b303c;
  box-shadow: 0 0 0 7px #ffffff15;
}
/* 专属微信/WhatsApp四色浮窗独立CSS与事件继续原样。 */
button:disabled,
button:disabled:active {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: not-allowed;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #ac8650;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  /* Pointer state is set by passive listeners: avoids sticky hover on phones. */
  a.is-pointer-over,
  button.is-pointer-over,
  summary.is-pointer-over {
    cursor: pointer;
  }
}
@media (max-width: 1000px) {
  .route-band .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .route-link,
  .route-link:first-child,
  .route-link:last-child {
    padding: 17px 13px;
  }
}
@media (max-width: 767px) {
  .boundary-grid {
    gap: 12px;
  }
  .boundary-grid > a,
  .boundary-grid > a:last-child {
    padding: 23px 20px;
  }
  .boundary-grid h3 {
    margin: 16px 0 12px;
  }
  .boundary-grid p {
    margin-bottom: 20px;
  }
  .route-link,
  .route-link:first-child,
  .route-link:last-child {
    gap: 8px;
    padding: 14px 10px;
  }
  .route-link strong {
    font-size: 12px;
  }
  .route-link small {
    font-size: 10px;
  }
  .route-link b {
    font-size: 22px;
  }
  .route-link::after {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: 15px;
  }
  .subnav-links {
    gap: 5px;
  }
  .subnav-links a {
    min-height: 38px;
    font-size: 10px;
    padding: 7px 10px;
  }
  .reading-links a {
    padding: 21px 12px;
    gap: 12px;
  }
  .reading-links h3 {
    font-size: 17px;
  }
}
@media (max-width: 350px) {
  .route-link,
  .route-link:first-child,
  .route-link:last-child {
    padding: 12px 8px;
    gap: 6px;
  }
  .route-link b {
    font-size: 18px;
  }
  .route-link::after {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  a,
  button,
  summary,
  a::before,
  a::after,
  summary::after,
  .text-link::after,
  .reading-links .arrow,
  .card-photo img,
  .nav-panel,
  .faq-answer,
  .media-play > span {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .nav-folder[open] > summary::after {
    transform: rotate(180deg) !important;
  }
}

:is(.faq-entry, .faq-list, .mobile-chapters) > summary:focus-visible {
  outline-offset: -4px;
}
.nav-panel > a:focus-visible,
.service-card:focus-visible,
.article-card:focus-visible,
.topic-card:focus-visible {
  outline-offset: -4px;
}