.miniapp-topbar { height: 58px; padding: 8px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: linear-gradient(105deg, #fff9ef, #fff5e9); }
.miniapp-topbar strong { color: var(--orange-dark); font-size: 21px; font-weight: 800; white-space: nowrap; }
.miniapp-topbar > button { height: 36px; padding: 0 12px; overflow: hidden; border-radius: 19px; background: white; box-shadow: 0 4px 15px rgba(93, 62, 30, .1); color: #514941; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.home-hero { position: relative; height: 218px; overflow: hidden; border-radius: 0 0 56px 0; color: white; }
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 38, 51, .08), rgba(9, 38, 51, .12) 50%, rgba(9, 38, 51, .36)); }
.hero-copy { position: absolute; z-index: 2; left: 24px; bottom: 26px; text-shadow: 0 3px 14px rgba(16, 48, 59, .42); }
.hero-copy h1 { font: 800 30px/1.16 "PingFang SC", sans-serif; letter-spacing: 1px; }
.hero-copy button { margin-top: 13px; padding: 9px 16px; border-radius: 19px; background: rgba(27, 149, 199, .93); color: white; font-size: 14px; }
.home-modules { padding: 16px; display: grid; gap: 12px; }
.ai-guide-banner { position: relative; height: 158px; overflow: hidden; border-radius: 22px; color: #225d35; text-align: left; box-shadow: var(--shadow-soft); }
.ai-guide-banner > img { width: 100%; height: 100%; object-fit: cover; }
.ai-guide-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.2) 70%); }
.ai-guide-banner > div { position: absolute; z-index: 1; left: 21px; top: 29px; }
.ai-guide-banner h2 { font: 800 30px/1 "PingFang SC", sans-serif; }
.ai-guide-banner p { margin-top: 10px; font-size: 13px; font-weight: 650; }
.ai-guide-banner span { margin-top: 15px; padding: 8px 13px; display: inline-flex; border-radius: 18px; background: var(--orange); color: white; font-size: 11px; font-weight: 700; }
.secondary-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.secondary-modules > button { position: relative; height: 105px; overflow: hidden; border-radius: 18px; background: white; text-align: left; box-shadow: var(--shadow-soft); }
.secondary-modules img { position: absolute; inset: 0 0 0 auto; width: 58%; height: 100%; object-fit: cover; opacity: .9; }
.secondary-modules > button:first-child img { object-fit: contain; transform: translateX(16px) scale(.9); }
.secondary-modules > button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,245,229,.98), rgba(255,245,229,.12)); }
.secondary-modules > button:nth-child(2)::after { background: linear-gradient(90deg, rgba(233,248,255,.98), rgba(233,248,255,.12)); }
.secondary-modules > button div { position: absolute; z-index: 1; left: 14px; top: 21px; }
.secondary-modules h3 { color: var(--orange-dark); font: 800 19px/1.2 "PingFang SC", sans-serif; }
.secondary-modules > button:nth-child(2) h3 { color: #176c92; }
.secondary-modules p { width: 92px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.featured-route { position: relative; height: 124px; overflow: hidden; border-radius: 18px; color: white; text-align: left; }
.featured-route > img { width: 100%; height: 100%; object-fit: cover; }
.featured-route::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 38, 29, .84), transparent 82%); }
.featured-route > div { position: absolute; z-index: 1; top: 16px; left: 16px; }
.featured-route h3 { font: 750 20px/1.2 "PingFang SC", sans-serif; }
.featured-route p { margin: 7px 0 10px; font-size: 11px; }
.featured-route span { padding: 6px 10px; border-radius: 14px; background: var(--orange); font-size: 10px; font-weight: 700; }

@media (max-width: 380px) {
  .miniapp-topbar strong { font-size: 18px; }
  .miniapp-topbar > button span { display: none; }
}