:root { --navy: #405a80; --blue: #527db7; --ink: #1d2026; --muted: #949ba6; --line: #e9edf2; --paper: #fff; --bg: #f2f4f8; }
* { box-sizing: border-box; }
.topbar h1 { white-space: nowrap; }
.back-button[hidden] { display: block; visibility: hidden; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
.app-shell { max-width: 720px; min-height: 100vh; margin: 0 auto; padding-bottom: 32px; }
.access-blocked { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; background: var(--bg); }.access-blocked h1 { margin: 4px 0 0; font-size: 24px; }.access-blocked p { margin: 0; color: #7d8794; }.access-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff1df; color: #a46217; font-size: 26px; font-weight: 700; }
.topbar { height: calc(62px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: var(--paper); border-bottom: 1px solid #eef0f4; }
.topbar h1 { margin: 0; text-align: center; font-size: 20px; font-weight: 650; }.back-button { border: 0; background: transparent; font-size: 42px; line-height: 1; color: var(--ink); padding: 0; text-align: left; }.wecom-notice { margin: 16px 20px 0; padding: 12px 16px; border-radius: 12px; background: #fff5df; color: #8c620b; font-size: 14px; }.page-content { padding: 24px 20px; }.hero-card, .detail-card, .table-card { background: var(--paper); border-radius: 22px; box-shadow: 0 8px 22px rgba(32, 47, 71, .06); }.hero-card, .detail-card { padding: 28px 24px 24px; }.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 13px; }.hero-card h2, .detail-card h2 { margin: 0; font-size: 28px; letter-spacing: .5px; }.blue-line { height: 4px; margin: 22px 0; background: var(--blue); }.search-box { height: 50px; display: flex; gap: 10px; align-items: center; border: 1px solid #dce1e8; border-radius: 12px; padding: 0 15px; color: var(--muted); }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }.result-count { margin: 24px 4px 12px; color: #7b8491; font-size: 14px; }.route-list { display: grid; gap: 11px; }.route-item { width: 100%; min-height: 64px; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; padding: 0 18px; border: 0; border-radius: 15px; color: var(--ink); background: var(--paper); text-align: left; box-shadow: 0 3px 14px rgba(32, 47, 71, .04); font-weight: 600; }.route-item:active { background: #f7f9fc; }.route-icon { color: var(--blue); font-size: 20px; }.chevron { color: #a6afbb; font-size: 24px; }.legend { display: flex; align-items: center; gap: 7px; margin: 0; flex-wrap: wrap; color: #697384; font-size: 13px; }.tag { display: inline-grid; place-items: center; min-width: 32px; height: 30px; border-radius: 7px; font-weight: 750; }.tag-t { color: #225996; background: #e8f1ff; }.tag-w { color: #9a5d19; background: #fff1df; }.tag-empty { color: #9ba4b0; }.table-card { overflow: hidden; margin-top: 18px; }.table-heading, .stop-row { display: grid; grid-template-columns: 44px minmax(64px, 1fr) minmax(82px, 1.1fr) minmax(82px, 1.1fr); align-items: center; }.table-heading { grid-template-columns: 44px minmax(64px, 1fr) minmax(82px, 1.1fr) minmax(82px, 1.1fr); min-height: 60px; background: #f8fafc; border-top: 4px solid var(--blue); color: #697384; font-size: 12px; text-align: center; }.table-heading span:first-child { grid-column: 1 / 3; }.table-heading span { padding: 4px 6px; }.stop-row { min-height: 64px; border-bottom: 1px solid var(--line); }.stop-row:last-child { border-bottom: 0; }.stop-number { text-align: center; color: #a8b0bb; font-size: 12px; }.stop-row strong { padding-right: 8px; font-size: 15px; }.stop-row > span:not(.stop-number) { justify-self: center; }.empty-state { padding: 34px 0; color: #8e98a6; text-align: center; } @media (max-width: 380px) { .page-content { padding-left: 14px; padding-right: 14px; }.table-heading, .stop-row { grid-template-columns: 32px minmax(56px, 1fr) minmax(70px, 1fr) minmax(70px, 1fr); }.table-heading { font-size: 11px; }.hero-card h2, .detail-card h2 { font-size: 24px; } }