:root {
  --green: #07894b;
  --green-dark: #006b38;
  --green-ink: #06331f;
  --red: #d3141e;
  --line: #b9dcae;
  --gold: #e3a00c;
  --shadow: 0 .35rem .9rem rgba(24, 74, 43, .11);
  --radius: 1.05rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  color: var(--green-ink);
  background: radial-gradient(circle at 50% 0, #fff 0, #f5faf4 72rem);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page {
  width: min(100%, 980px);
  min-height: 100vh;
  margin-inline: auto;
  padding: 0 clamp(.7rem, 1.6vw, 1.15rem) max(.9rem, env(safe-area-inset-bottom));
}

.hero {
  overflow: hidden;
  margin-inline: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
}
.hero img { width: 100%; height: 320px; object-fit: fill; }

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.45rem, 1.15vw, .8rem);
  margin-top: clamp(.62rem, 1.15vw, .85rem);
}
.quick-card {
  min-width: 0;
  min-height: clamp(4.15rem, 6vw, 4.65rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 1.1vw, .85rem);
  padding: .38rem .36rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fff, #f9fcf9);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.8);
  transition: transform .18s ease, border-color .18s ease;
}
.quick-card:hover { transform: translateY(-2px); border-color: #73c58d; }
.quick-card img { flex: 0 0 auto; width: clamp(2rem, 3.35vw, 2.65rem); height: clamp(2rem, 3.35vw, 2.65rem); }
.quick-card strong, .quick-card small { display: block; white-space: nowrap; }
.quick-card strong { font-size: clamp(.84rem, 1.75vw, 1.22rem); line-height: 1.3; }
.quick-card small { margin-top: .16rem; color: #364a3f; font-size: clamp(.61rem, 1.15vw, .85rem); }

.routes {
  margin-top: clamp(.62rem, 1.15vw, .85rem);
  padding: clamp(.65rem, 1.35vw, 1rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + .12rem);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}
.routes__heading { text-align: center; }
.routes__heading h1 { margin: 0; color: var(--green); font-size: clamp(1.22rem, 2.65vw, 1.85rem); line-height: 1.25; letter-spacing: .05em; }
.routes__heading h1 i { font-style: normal; font-size: .68em; }
.routes__heading p { margin: .28rem 0 .62rem; color: #3b5145; font-size: clamp(.62rem, 1.2vw, .86rem); letter-spacing: .2em; }
.routes__heading p b { display: inline-block; width: .24rem; height: .24rem; margin: 0 .45rem; border-radius: 50%; background: var(--green-dark); vertical-align: middle; }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.55rem, 1vw, .8rem); }
.route-group { min-width: 0; padding: .55rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; box-shadow: 0 .28rem .65rem rgba(19,71,39,.08); }
.route-group--red { border-color: #edcec4; }
.route-title { display: flex; align-items: center; gap: .5rem; margin: 0 .25rem .45rem; color: var(--green); font-size: clamp(1rem, 2vw, 1.42rem); }
.route-group--red .route-title { color: var(--red); }
.route-title img { width: 2.45rem; height: 2.45rem; }
.route-list { display: grid; gap: .3rem; }
.route-row {
  display: grid;
  grid-template-columns: auto 6.5rem minmax(6.2rem, 1fr) auto;
  align-items: center;
  gap: clamp(.32rem, .65vw, .55rem);
  min-height: 3.95rem;
  padding: .3rem .35rem;
  border: 1px solid #e3eee2;
  border-radius: .72rem;
  background: #fff;
  box-shadow: 0 .14rem .36rem rgba(24,73,42,.07);
}
.route-number { width: 2.85rem; height: 2.85rem; display: grid; place-items: center; border-radius: .64rem; color: #fff; background: linear-gradient(145deg, #16a45f, #006d38); font: 700 1.18rem/1 Georgia, serif; }
.route-group--red .route-number { background: linear-gradient(145deg, #ed2731, #b5000a); }
.route-label { width: 6.5rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.route-name { font-weight: 700; font-size: clamp(.68rem, 1.2vw, .88rem); white-space: nowrap; }
.route-domain { width: 100%; justify-self: center; text-align: center; font-weight: 800; font-size: clamp(.84rem, 1.45vw, 1rem); white-space: nowrap; }
.route-side { display: flex; align-items: center; justify-content: flex-end; gap: .28rem; text-align: center; }
.route-button { min-width: 6.45rem; display: block; padding: .36rem .62rem; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #18b661, #008442); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 .14rem .3rem rgba(0,115,57,.18); font: 700 .75rem/1 inherit; cursor: pointer; }
.route-group--red .route-button { background: linear-gradient(180deg, #ef343d, #bd0710); }
.route-tags { display: flex; justify-content: flex-start; gap: .16rem; margin-top: .16rem; }
.route-tags span { padding: .03rem .24rem; border: 1px solid #c2dfbf; border-radius: .24rem; color: var(--green); font-size: .53rem; white-space: nowrap; }
.route-group--red .route-tags span { border-color: #efd3ca; color: var(--red); }

.wealth {
  overflow: hidden;
  margin-top: clamp(.62rem, 1.15vw, .85rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + .12rem);
  background: #fff;
  box-shadow: none;
}
.wealth img { width: 100%; height: 300px; object-fit: fill; }

.footer-nav {
  position: fixed;
  z-index: 20;
  right: auto;
  bottom: max(.7rem, env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 2rem), calc(980px - 2.3rem));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.94);
  box-shadow: 0 .7rem 1.8rem rgba(10, 73, 39, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.footer-nav a { position: relative; min-width: 0; min-height: 4.65rem; display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 1vw, .72rem); padding: .48rem .3rem; }
.footer-nav a + a::before { content: ""; position: absolute; left: 0; top: 23%; bottom: 23%; width: 1px; background: #cce4cc; }
.footer-nav img { width: clamp(2rem, 3.9vw, 2.85rem); height: clamp(2rem, 3.9vw, 2.85rem); }
.footer-nav strong, .footer-nav small { display: block; white-space: nowrap; }
.footer-nav strong { font-size: clamp(.74rem, 1.4vw, .98rem); }
.footer-nav small { margin-top: .1rem; color: var(--green); font-size: clamp(.55rem, 1vw, .72rem); }

.toast { position: fixed; z-index: 20; left: 50%; bottom: max(1.1rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 2rem); padding: .7rem 1rem; border-radius: 999px; color: #fff; background: rgba(4,51,29,.94); box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translate(-50%, .8rem); transition: .2s ease; font-size: .78rem; white-space: nowrap; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  html { font-size: clamp(14px, 3.45vw, 16px); }
  body { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
  .page { padding-inline: .42rem; padding-bottom: .65rem; }
  .hero { margin-inline: -.42rem; border-radius: 0 0 .82rem .82rem; }
  .hero img { height: auto; aspect-ratio: 1280 / 614; object-fit: fill; }
  .quick-grid { gap: .28rem; margin-top: .48rem; }
  .quick-card { min-height: 3.65rem; flex-direction: column; gap: .04rem; padding: .22rem .06rem; text-align: center; border-radius: .68rem; }
  .quick-card img { width: 1.72rem; height: 1.72rem; }
  .quick-card strong { color: #062f1d; font-size: .78rem; line-height: 1.15; font-weight: 800; }
  .quick-card small { display: none; }
  .routes { margin-top: .5rem; padding: .52rem; border-radius: .82rem; }
  .routes__heading h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: .02em; text-shadow: 0 .08rem .18rem rgba(0, 108, 56, .12); }
  .routes__heading p { margin: .25rem 0 .55rem; font-size: .63rem; letter-spacing: .06em; }
  .routes__heading p b { margin-inline: .2rem; }
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
  .route-group { padding: .32rem; border-radius: .72rem; }
  .route-title { gap: .28rem; margin: 0 .12rem .3rem; font-size: .9rem; font-weight: 800; white-space: nowrap; }
  .route-title img { width: 1.7rem; height: 1.7rem; }
  .route-row { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 3.45rem; gap: .18rem; padding: .22rem; }
  .route-label { width: auto; }
  .route-number { width: 1.8rem; height: 1.8rem; border-radius: .42rem; font-size: .76rem; }
  .route-name { color: #052d1c; font-size: clamp(.5rem, 2.3vw, .6rem); font-weight: 800; }
  .route-name-prefix { display: inline; }
  .route-domain { display: none; }
  .route-button { min-width: 4.3rem; padding: .34rem .2rem; font-size: .64rem; font-weight: 800; box-shadow: 0 .22rem .48rem rgba(0, 115, 57, .25); }
  .route-group--red .route-button { box-shadow: 0 .22rem .48rem rgba(189, 7, 16, .22); }
  .route-side { gap: .15rem; }
  .route-tags { gap: .08rem; margin-top: .1rem; }
  .route-tags span { padding: .03rem .12rem; font-size: .48rem; }
  .wealth { margin-top: .5rem; border-radius: .82rem; }
  .wealth img { height: auto; aspect-ratio: 1024 / 460; }
  .footer-nav {
    position: fixed;
    z-index: 20;
    right: .5rem;
    bottom: max(.5rem, env(safe-area-inset-bottom));
    left: .5rem;
    width: auto;
    margin-top: 0;
    border-color: rgba(159, 207, 148, .9);
    border-radius: .9rem;
    background: rgba(255,255,255,.94);
    box-shadow: 0 .7rem 1.8rem rgba(10, 73, 39, .2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: none;
  }
  .footer-nav a { min-height: 3.9rem; flex-direction: column; gap: 0; padding: .24rem .04rem; text-align: center; }
  .footer-nav img { width: 1.7rem; height: 1.7rem; }
  .footer-nav strong { color: #052d1c; font-size: .78rem; font-weight: 800; }
  .footer-nav small { margin-top: .02rem; font-size: .57rem; }
}

@media (max-width: 360px) {
  .route-grid { gap: .28rem; }
  .route-group { padding: .26rem; }
  .route-title { font-size: .78rem; }
  .route-title img { width: 1.45rem; height: 1.45rem; }
  .route-row { grid-template-columns: auto minmax(0, 1fr); gap: .12rem; min-height: 4.45rem; }
  .route-label { width: auto; }
  .route-number { width: 1.65rem; height: 1.65rem; font-size: .7rem; }
  .route-name { font-size: .5rem; }
  .route-side { grid-column: 1 / -1; width: 100%; }
  .route-button { width: 100%; min-width: 0; padding-block: .28rem; font-size: .62rem; }
  .route-tags span { font-size: .46rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}