/* styles.css */
:root {
  --night: #061c2a;
  --night-2: #092638;
  --night-3: #10364a;
  --ink: #f8fbf9;
  --muted: #9db0b8;
  --muted-2: #6e8994;
  --line: rgba(220, 242, 241, .14);
  --ice: #e9f2ef;
  --paper: #fbf7ec;
  --gold: #f2c76d;
  --gold-bright: #ffd98a;
  --blue: #2d9cdb;
  --blue-soft: #bfeaff;
  --mint: #8de1cf;
  --coral: #ff8060;
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --radius-lg: 24px;
  --radius-md: 17px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #dbe8e8;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #dbe8e8; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(255, 217, 138, .55); outline-offset: 2px; }

.app-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.app-frame { width: min(100%, 408px); height: min(900px, calc(100vh - 40px)); min-height: 700px; position: relative; overflow: hidden; border-radius: 30px; background: var(--night); box-shadow: 0 26px 70px rgba(12, 40, 51, .28); }
.status-bar { height: 31px; position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 19px 0; color: white; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.status-icons { display: flex; align-items: end; gap: 3px; height: 12px; }
.status-icons i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.9); }
.status-icons i:nth-child(1) { height: 4px; } .status-icons i:nth-child(2) { height: 7px; } .status-icons i:nth-child(3) { height: 10px; }
.status-icons b { width: 11px; height: 8px; margin-left: 4px; border: 1px solid rgba(255,255,255,.9); border-radius: 7px 7px 3px 3px; transform: rotate(45deg) scale(.7); }
.status-icons em { width: 16px; height: 8px; position: relative; margin-left: 3px; border: 1px solid rgba(255,255,255,.9); border-radius: 2px; }
.status-icons em::after { content: ""; width: 2px; height: 4px; position: absolute; top: 1px; right: -3px; border-radius: 0 2px 2px 0; background: rgba(255,255,255,.9); }
.app-header { height: 72px; position: absolute; z-index: 4; top: 31px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; pointer-events: none; }
.app-header > * { pointer-events: auto; }
.brand-lockup { display: flex; align-items: center; gap: 9px; }
.brand-paw { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; font-size: 18px; }
.brand-name { display: block; font-size: 16px; font-weight: 800; letter-spacing: .18em; }
.brand-sub { display: block; margin-top: 2px; color: rgba(255,255,255,.72); font-size: 7px; letter-spacing: .09em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-button { min-width: 39px; height: 36px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(5, 24, 36, .32); color: white; font-size: 17px; }
.header-button.guide { width: auto; padding: 0 11px; border-color: rgba(242,199,109,.45); color: var(--gold-bright); font-size: 11px; font-weight: 700; }
.header-button:hover { background: rgba(255,255,255,.13); }
.back-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(4, 22, 32, .3); color: white; font-size: 25px; }

.screen { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--night); }
.screen::-webkit-scrollbar { display: none; }
.bottom-nav { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 77px; padding: 9px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(219,244,240,.08); background: rgba(3, 21, 33, .95); backdrop-filter: blur(15px); }
.nav-button { display: grid; place-items: center; align-content: center; gap: 4px; padding: 4px; border-radius: 13px; background: transparent; color: #78919a; font-size: 10px; transition: color .16s var(--ease), transform .16s var(--ease); }
.nav-button:hover { color: white; }
.nav-button:active { transform: scale(.95); }
.nav-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; font-size: 19px; line-height: 1; }
.nav-button.active { color: var(--gold-bright); font-weight: 700; }
.nav-button.active .nav-icon { background: rgba(242,199,109,.17); box-shadow: 0 0 18px rgba(242,199,109,.13); }

.home-screen { min-height: 100%; position: relative; padding-bottom: 90px; background: var(--night); }
.home-hero { min-height: max(670px, calc(100vh - 77px)); position: relative; overflow: hidden; padding: 127px 24px 190px; background-image: linear-gradient(180deg, rgba(4, 20, 32, .14) 0%, rgba(4, 20, 32, .08) 34%, rgba(6, 28, 42, .88) 93%), url("/assets/pet-travel-hero-fast.e84dc152.webp"); background-position: 59% center; background-size: cover; }
.home-hero::before { content: ""; width: 108px; height: 108px; position: absolute; right: -20px; top: 132px; border: 18px solid rgba(255,255,255,.11); border-radius: 50%; }
.home-hero::after { content: ""; width: 8px; height: 8px; position: absolute; right: 70px; top: 195px; border-radius: 50%; background: var(--gold-bright); box-shadow: 30px -37px 0 2px rgba(255,255,255,.75), -46px 35px 0 0 rgba(255,255,255,.68); }
.home-copy { position: relative; z-index: 1; max-width: 260px; }
.home-eyebrow { margin: 0 0 13px; color: var(--gold-bright); font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.home-title { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(41px, 12vw, 59px); line-height: 1.07; font-weight: 800; letter-spacing: .02em; text-shadow: 0 4px 18px rgba(0,0,0,.2); }
.home-title::after { display: none; }
.home-desc { margin: 19px 0 0; color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.75; }
.assurance-chip { position: absolute; z-index: 1; top: 131px; right: 22px; width: 77px; padding: 8px 7px; border: 1px solid rgba(255,255,255,.55); border-radius: 13px; background: rgba(5,25,39,.28); color: white; font-size: 10px; line-height: 1.35; text-align: center; }
.assurance-chip b { display: block; color: var(--gold-bright); font-size: 15px; }
.home-dock { position: absolute; z-index: 2; right: 14px; bottom: 83px; left: 14px; padding: 17px 15px 15px; border-radius: 24px; background: rgba(249, 249, 242, .97); color: var(--night); box-shadow: 0 16px 35px rgba(0,0,0,.2); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.service-button { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 0 1px; background: transparent; color: var(--night); }
.service-icon { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50%; background: #e6f2f4; color: #217db2; font-size: 22px; }
.service-button:nth-child(2) .service-icon { color: #a6772a; background: #fff2d1; }
.service-button:nth-child(3) .service-icon { color: #4b927e; background: #dff2e7; }
.service-button:nth-child(4) .service-icon { color: #b86e68; background: #ffebe5; }
.service-button strong { font-size: 10px; white-space: nowrap; }
.service-button small { color: #9aaba9; font-size: 8px; white-space: nowrap; }
.service-button:hover .service-icon { transform: translateY(-2px); }
.hero-cta { width: 100%; min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 17px; border-radius: 16px; background: var(--blue); color: white; box-shadow: 0 8px 17px rgba(45,156,219,.3); font-size: 14px; font-weight: 800; }
.hero-cta span { font-size: 22px; font-weight: 400; }
.hero-cta:hover { background: #238bc6; }
.home-quote { padding: 24px 20px 19px; background: var(--night); }
.section-overline { margin: 0 0 8px; color: var(--gold); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.section-title { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.section-description { margin: 7px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.route-picker { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--night-2); }
.section-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.status-badge { flex: 0 0 auto; padding: 6px 8px; border-radius: 7px; background: rgba(141,225,207,.13); color: var(--mint); font-size: 9px; }
.route-summary { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--night-2); }
.route-summary span, .route-summary strong { font-size: 10px; }
.route-summary span { color: var(--muted-2); }
.route-summary strong { flex: 1; color: var(--ice); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-summary button { padding: 5px 0; background: transparent; color: var(--gold-bright); font-size: 10px; white-space: nowrap; }
.route-city small { display: block; margin-bottom: 5px; color: var(--muted-2); font-size: 9px; }
.route-city strong { display: block; font-size: 16px; }
.route-arrow { color: var(--gold); font-size: 19px; }
.outline-cta { min-height: 44px; padding: 0 14px; border: 1px solid rgba(242,199,109,.4); border-radius: 12px; background: transparent; color: var(--gold-bright); font-size: 12px; font-weight: 700; }
.outline-cta:hover { background: rgba(242,199,109,.1); }

.inner-screen { min-height: 100%; padding: 115px 19px 105px; background: var(--night); }
.screen-header { margin-bottom: 24px; }
.screen-header.with-back { display: flex; align-items: start; gap: 12px; }
.screen-header h1 { margin: 7px 0 0; font-size: 30px; line-height: 1.14; letter-spacing: -.055em; text-wrap: balance; }
.screen-header p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.screen-header .header-copy { flex: 1; }
.gold-label { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.guide-link { margin-left: auto; padding: 7px 10px; border: 1px solid rgba(242,199,109,.38); border-radius: 99px; background: rgba(242,199,109,.08); color: var(--gold-bright); font-size: 10px; font-weight: 700; }
.transport-visual { min-height: 160px; position: relative; overflow: hidden; margin: -4px -19px 18px; padding: 24px 23px; background-image: linear-gradient(90deg, rgba(5,24,37,.95), rgba(5,24,37,.36)), url("/assets/pet-travel-hero-fast.e84dc152.webp"); background-position: center 62%; background-size: cover; }
.visual-kicker { display: block; margin-bottom: 13px; color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.visual-orbit { position: absolute; right: 28px; bottom: 21px; color: var(--gold-bright); font-size: 42px; opacity: .85; }
.transport-visual h2 { max-width: 230px; margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 26px; line-height: 1.2; }
.transport-visual p { max-width: 200px; margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.5; }
.transport-list { display: grid; gap: 11px; }
.transport-card { width: 100%; display: flex; align-items: center; gap: 13px; min-height: 82px; padding: 13px 13px 13px 15px; border: 1px solid rgba(220,242,241,.1); border-radius: 17px; background: var(--night-2); text-align: left; transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.transport-card:hover { transform: translateX(3px); border-color: rgba(242,199,109,.4); background: #0c3043; }
.transport-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; background: #16425a; color: var(--blue-soft); font-size: 24px; }
.transport-card:nth-child(2) .transport-icon { background: #54462b; color: var(--gold-bright); }
.transport-card:nth-child(3) .transport-icon { background: #244d48; color: var(--mint); }
.transport-card:nth-child(4) .transport-icon { background: #4d3840; color: #ffb4a2; }
.transport-card:nth-child(5) .transport-icon { background: #3f3857; color: #d6c8ff; }
.transport-copy { min-width: 0; flex: 1; }
.transport-copy strong { display: block; font-size: 15px; }
.transport-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.transport-price { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.transport-price small { color: var(--muted-2); font-size: 9px; }
.transport-price b { color: var(--gold-bright); font-size: 15px; }
.transport-arrow { color: #91a6ac; font-size: 22px; }

.tracking-screen { min-height: 100%; position: relative; padding-bottom: 105px; background: var(--night); }
.tracking-hero { min-height: 365px; position: relative; overflow: hidden; padding: 117px 20px 22px; background-image: linear-gradient(180deg, rgba(4,22,35,.66), rgba(5,31,42,.84)), url("/assets/pet-travel-hero-fast.e84dc152.webp"); background-position: 60% 62%; background-size: cover; }
.tracking-hero::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(circle at 12% 28%, #a6eee2 0 2px, transparent 3px), radial-gradient(circle at 74% 30%, #f9d788 0 2px, transparent 3px), radial-gradient(circle at 85% 73%, #fff 0 2px, transparent 3px); background-size: 72px 68px, 105px 83px, 90px 111px; pointer-events: none; }
.tracking-copy { position: relative; z-index: 1; }
.tracking-copy h1 { max-width: 290px; margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 34px; line-height: 1.18; }
.tracking-copy p { margin: 11px 0 0; color: rgba(255,255,255,.76); font-size: 11px; }
.map-route { height: 147px; position: relative; margin-top: 18px; border: 1px solid rgba(219,244,240,.16); border-radius: 19px; background: rgba(4,32,45,.65); overflow: hidden; }
.map-route::before, .map-route::after { content: ""; position: absolute; border: 1px solid rgba(118,203,197,.28); border-radius: 47% 53% 43% 57%; transform: rotate(14deg); }
.map-route::before { width: 150px; height: 93px; top: 9px; left: -24px; }
.map-route::after { width: 178px; height: 100px; right: -23px; bottom: -19px; transform: rotate(-12deg); }
.route-path { position: absolute; left: 50px; right: 53px; top: 75px; height: 2px; border-top: 2px dashed var(--gold); transform: rotate(-17deg); transform-origin: center; }
.route-point { width: 27px; height: 27px; position: absolute; z-index: 1; display: grid; place-items: center; border: 4px solid #0b3143; border-radius: 50%; background: var(--gold-bright); color: var(--night); font-size: 11px; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.route-point.start { left: 31px; bottom: 23px; }
.route-point.current { left: calc(50% - 14px); top: 46px; background: var(--coral); color: white; animation: pulse 1.7s ease-out infinite; }
.route-point.end { right: 25px; top: 21px; background: var(--mint); }
.route-place { position: absolute; color: rgba(255,255,255,.86); font-size: 9px; }
.route-place.start { left: 28px; bottom: 7px; }
.route-place.current { left: calc(50% - 26px); top: 78px; color: var(--gold-bright); }
.route-place.end { right: 18px; top: 52px; }
.globe-wrap { height: 225px; position: relative; margin-top: 16px; overflow: hidden; border: 1px solid rgba(219,244,240,.18); border-radius: 22px; background: radial-gradient(circle at 50% 42%, rgba(57,150,173,.38), rgba(4,32,45,.82) 65%); }
.globe-canvas-holder, .globe-canvas { width: 100%; height: 100%; display: block; }
.globe-label { position: absolute; z-index: 1; padding: 5px 7px; border-radius: 6px; background: rgba(4,23,34,.75); color: var(--ice); font-size: 9px; }
.origin-label { left: 13px; bottom: 18px; }
.destination-label { right: 13px; top: 18px; }
.globe-legend { position: absolute; right: 12px; bottom: 14px; color: var(--muted); font-size: 9px; }
.globe-legend i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--mint); }
.track-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.track-metrics div { padding: 10px 8px; border-radius: 11px; background: var(--night-2); }
.track-metrics span, .track-metrics strong { display: block; }
.track-metrics span { color: var(--muted-2); font-size: 8px; }
.track-metrics strong { margin-top: 5px; color: var(--ice); font-size: 10px; line-height: 1.25; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,128,96,.55); } 80%, 100% { box-shadow: 0 0 0 12px rgba(255,128,96,0); } }
.tracking-content { padding: 0 19px; }
.tracking-card { position: relative; margin-top: -1px; padding: 18px; border: 1px solid rgba(220,242,241,.1); border-radius: 20px; background: var(--night-2); box-shadow: var(--shadow); }
.pet-row { display: flex; align-items: center; gap: 11px; }
.pet-photo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #f0c09f; color: #755037; }
.pet-photo svg { width: 23px; height: 23px; }
.pet-row strong { display: block; font-size: 15px; }
.pet-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.live-pill { margin-left: auto; padding: 6px 8px; border-radius: 7px; background: rgba(141,225,207,.13); color: var(--mint); font-size: 9px; }
.live-pill::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--mint); vertical-align: 1px; }
.progress-row { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin-top: 21px; }
.progress-row::before { content: ""; position: absolute; top: 8px; left: 9px; right: 9px; height: 2px; background: linear-gradient(90deg, var(--gold) 0 47%, rgba(220,242,241,.2) 47%); }
.progress-point { position: relative; z-index: 1; }
.progress-point:nth-child(2) { text-align: center; }
.progress-point:last-child { text-align: right; }
.progress-dot { width: 17px; height: 17px; display: inline-grid; place-items: center; border: 4px solid var(--night-2); border-radius: 50%; background: var(--gold-bright); color: var(--night); font-size: 8px; }
.progress-point:last-child .progress-dot { background: #254452; }
.progress-point strong { display: block; margin-top: 7px; font-size: 10px; }
.progress-point small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.location-card { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 12px; border-radius: 12px; background: #0f3c4e; }
.location-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #1a5970; color: var(--blue-soft); font-size: 18px; }
.location-card strong { display: block; font-size: 11px; }
.location-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.location-card button { margin-left: auto; padding: 5px 7px; border: 1px solid rgba(191,234,255,.35); border-radius: 7px; background: transparent; color: var(--blue-soft); font-size: 9px; }
.reminder-button { width: 100%; min-height: 44px; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 13px; border-radius: 12px; background: var(--paper); color: #6f5429; font-size: 12px; font-weight: 800; }

.profile-screen { min-height: 100%; padding-bottom: 105px; background: var(--night); }
.profile-cover { min-height: 297px; position: relative; padding: 122px 21px 23px; background-image: linear-gradient(180deg, rgba(4,21,31,.26), rgba(5,27,39,.97)), url("/assets/pet-travel-hero-fast.e84dc152.webp"); background-position: center 67%; background-size: cover; }
.profile-row-main { display: flex; align-items: center; gap: 13px; }
.profile-avatar { width: 63px; height: 63px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.35); border-radius: 50%; background: #d8e9e4; color: #3c696b; font-size: 33px; }
.profile-name { font-size: 20px; }
.vip-chip { display: inline-block; margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(242,199,109,.17); color: var(--gold-bright); font-size: 9px; }
.profile-copy { margin: 14px 0 0; color: rgba(255,255,255,.78); font-size: 11px; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.stat { text-align: center; }
.stat strong { display: block; font-size: 17px; }
.stat small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.profile-body { padding: 18px 19px 28px; }
.member-card { display: flex; align-items: center; gap: 12px; padding: 15px; border-radius: 16px; background: var(--paper); color: #5c4929; }
.member-icon { font-size: 23px; }
.member-card strong { display: block; font-size: 13px; }
.member-card small { display: block; margin-top: 4px; color: #9b8660; font-size: 9px; }
.member-card button { margin-left: auto; padding: 8px 11px; border-radius: 8px; background: #bf8d3a; color: white; font-size: 10px; font-weight: 700; }
.dark-section-head { display: flex; align-items: center; justify-content: space-between; margin: 21px 0 11px; }
.dark-section-head h2 { margin: 0; font-size: 16px; }
.dark-section-head button { padding: 5px 8px; border-radius: 99px; background: rgba(220,242,241,.1); color: var(--muted); font-size: 10px; }
.pet-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pet-mini { min-width: 0; padding: 11px 8px; border-radius: 14px; background: var(--night-2); text-align: left; }
.pet-mini-face { width: 100%; height: 73px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 11px; background: #e8b998; color: #755037; }
.pet-mini-face svg { width: 31px; height: 31px; }
.pet-mini:nth-child(2) .pet-mini-face { background: #aebdbf; }
.pet-mini.add .pet-mini-face { background: #17384a; color: var(--muted); font-size: 25px; }
.pet-mini strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pet-mini small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-link { display: grid; justify-items: center; gap: 7px; min-height: 64px; padding: 10px 2px; border-radius: 12px; background: var(--night-2); color: var(--muted); font-size: 9px; }
.quick-link span { color: var(--ice); font-size: 19px; }
.quick-link:hover { color: var(--gold-bright); background: #0c3043; }
.next-trip { display: flex; align-items: center; gap: 10px; min-height: 61px; padding: 11px; border: 1px solid rgba(242,199,109,.25); border-radius: 13px; background: #172f3b; }
.next-trip .mini-route-icon { font-size: 23px; }
.next-trip strong { display: block; font-size: 11px; }
.next-trip small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.next-trip button { margin-left: auto; color: var(--gold-bright); background: transparent; font-size: 19px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(2, 17, 27, .72); backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(390px, 100%); max-height: min(720px, 90vh); overflow: auto; padding: 23px 20px; border: 1px solid rgba(220,242,241,.13); border-radius: 22px; background: var(--night-2); box-shadow: 0 25px 70px rgba(0,0,0,.4); animation: modal-in .24s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.modal h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; }
.modal-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.close-button { width: 31px; height: 31px; border-radius: 9px; background: rgba(220,242,241,.1); color: var(--muted); font-size: 19px; }
.close-button:hover { color: var(--gold-bright); background: rgba(242,199,109,.12); }
.form-grid { display: grid; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: var(--muted); font-size: 10px; font-weight: 700; }
.form-field input, .form-field select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid rgba(220,242,241,.15); border-radius: 10px; outline: none; background: #072131; color: var(--ink); font-size: 12px; }
.form-field input::placeholder { color: #65808a; }
.form-field input:focus, .form-field select:focus { border-color: var(--gold); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.modal-primary, .modal-secondary { min-height: 42px; padding: 0 14px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.modal-primary { background: var(--blue); color: white; }
.modal-secondary { background: rgba(220,242,241,.1); color: var(--muted); }
.modal-card { padding: 14px; border-radius: 13px; background: #0e3546; }
.modal-card strong { display: block; font-size: 12px; }
.modal-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.check-item { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 9px; border-radius: 8px; background: #0e3546; color: var(--muted); font-size: 10px; }
.check-item input { accent-color: var(--gold); }
.estimate-result { margin-top: 16px; padding: 13px; border-radius: 12px; background: #0e3546; }
.muted-result { color: var(--muted-2); font-size: 10px; }
.estimate-total { display: flex; align-items: center; justify-content: space-between; }
.estimate-total span { color: var(--muted); font-size: 10px; }
.estimate-total strong { color: var(--gold-bright); font-size: 24px; font-variant-numeric: tabular-nums; }
.estimate-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; color: var(--ice); font-size: 11px; font-weight: 700; }
.estimate-route b { color: var(--gold); }
.estimate-route small { width: 100%; color: var(--muted); font-size: 9px; font-weight: 400; }
.estimate-lines { display: grid; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.estimate-lines div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.estimate-lines b { color: var(--ice); font-weight: 600; }
.estimate-note { display: block; margin-top: 12px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.full-button { width: 100%; margin-top: 13px; }
.loading-line { color: var(--muted); font-size: 10px; }
.dark-action { width: 100%; min-height: 45px; margin-top: 15px; border: 1px solid rgba(242,199,109,.32); border-radius: 12px; background: rgba(242,199,109,.08); color: var(--gold-bright); font-size: 11px; font-weight: 700; }
.empty-state { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 120px 24px; background: var(--night); text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(242,199,109,.28); border-radius: 16px; color: var(--gold); }
.empty-state > span svg { width: 25px; height: 25px; }
.gender-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: rgba(242,199,109,.12); color: var(--gold-bright); font-size: 9px; font-weight: 700; vertical-align: 1px; }
.empty-state h2 { margin: 7px 0 0; font-size: 18px; }
.empty-state p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.guide-list { display: grid; gap: 11px; }
.guide-step { display: grid; grid-template-columns: 33px 1fr; gap: 11px; align-items: start; }
.guide-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(242,199,109,.13); color: var(--gold-bright); font-size: 11px; font-weight: 800; }
.guide-step strong { display: block; font-size: 12px; }
.guide-step p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.toast { position: fixed; z-index: 30; right: 20px; bottom: max(25px, env(safe-area-inset-bottom)); left: 20px; max-width: 370px; margin: auto; padding: 12px 15px; border: 1px solid rgba(220,242,241,.12); border-radius: 11px; background: #102f3f; color: white; box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.toast.show { opacity: 1; transform: none; }

/* Refined icon language and community */
svg { width: 1em; height: 1em; display: block; pointer-events: none; }
h1, h2, h3 { letter-spacing: 0 !important; }
.header-button.guide { display: flex; align-items: center; gap: 6px; }
.header-button.guide svg { width: 13px; height: 13px; }
.header-button:not(.guide) svg, .back-button svg { width: 18px; height: 18px; }
.brand-paw svg { width: 17px; height: 17px; }
.home-title, .tracking-copy h1, .transport-visual h2 { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 850; }
.home-title { font-size: clamp(42px, 11vw, 54px); line-height: 1.02; }
.home-title::after { display: none; }
.assurance-chip { display: flex; align-items: center; justify-content: center; gap: 6px; width: 92px; text-align: left; }
.assurance-chip svg { width: 21px; height: 21px; color: var(--gold-bright); }
.home-dock { padding: 19px 13px 14px; border-radius: 20px; }
.service-grid { gap: 0; }
.service-button { position: relative; gap: 5px; min-height: 76px; padding: 4px 2px; }
.service-button + .service-button::before { content: ""; width: 1px; height: 42px; position: absolute; left: 0; top: 9px; background: rgba(6,28,42,.08); }
.service-icon, .service-button:nth-child(n) .service-icon { width: 38px; height: 32px; border-radius: 0; background: transparent; color: #0f5771; font-size: 25px; }
.service-icon svg { width: 24px; height: 24px; }
.service-button strong { color: #102f3d; font-size: 10px; font-weight: 750; }
.service-button small { color: #7f9395; font-size: 8px; }
.service-button:hover .service-icon { transform: translateY(-2px); color: #1687ad; }
.hero-cta, .dark-action, .reminder-button, .outline-cta, .modal-primary { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero-cta { min-height: 49px; margin-top: 12px; border-radius: 12px; }
.hero-cta svg { width: 17px; height: 17px; }
.hero-cta svg:last-child { margin-left: 4px; }
.hero-cta span { font-size: 14px; }
.outline-cta svg, .dark-action svg, .reminder-button svg, .modal-primary svg { width: 14px; height: 14px; }
.route-summary button { display: flex; align-items: center; gap: 4px; }
.route-summary button svg { width: 12px; height: 12px; }
.bottom-nav { grid-template-columns: repeat(5, 1fr); height: 80px; padding: 8px 5px max(9px, env(safe-area-inset-bottom)); }
.nav-button { gap: 3px; font-size: 9px; }
.nav-icon { width: 28px; height: 28px; font-size: 18px; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-button[data-tab="community"] { overflow: visible; }
.nav-button[data-tab="community"] .nav-icon { width: 42px; height: 42px; margin-top: -13px; border: 1px solid rgba(242,199,109,.58); border-radius: 50%; background: #12384a; color: var(--gold-bright); box-shadow: 0 7px 18px rgba(0,0,0,.26); }
.nav-button[data-tab="community"] .nav-icon svg { width: 20px; height: 20px; }
.nav-button[data-tab="community"].active .nav-icon { background: var(--gold); color: #463512; }
.transport-icon svg { width: 22px; height: 22px; }
.transport-arrow svg { width: 18px; height: 18px; }
.visual-orbit svg { width: 42px; height: 42px; }
.profile-avatar svg { width: 28px; height: 28px; }
.vip-chip { display: flex; align-items: center; gap: 5px; width: fit-content; }
.vip-chip svg { width: 11px; height: 11px; }
.member-icon svg, .quick-link svg, .mini-route-icon svg { width: 21px; height: 21px; }
.dark-section-head button { display: flex; align-items: center; gap: 4px; }
.dark-section-head button svg { width: 12px; height: 12px; }
.progress-dot svg { width: 9px; height: 9px; }
.location-icon svg { width: 18px; height: 18px; }
.form-field textarea { width: 100%; resize: vertical; min-height: 96px; padding: 11px 12px; border: 1px solid rgba(220,242,241,.15); border-radius: 10px; outline: none; background: #072131; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.6; }
.form-field textarea:focus { border-color: var(--gold); }

.community-screen { min-height: 100%; padding: 114px 15px 110px; background: #071f2e; }
.community-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 0 5px 24px; }
.community-header h1 { margin: 8px 0 0; color: var(--ink); font-size: 32px; line-height: 1.08; font-weight: 850; }
.community-header h1 em { color: var(--gold-bright); font-style: normal; }
.community-header p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.community-publish { width: 55px; height: 55px; display: grid; place-items: center; align-content: center; gap: 3px; flex: 0 0 auto; border: 1px solid rgba(242,199,109,.35); border-radius: 50%; background: var(--gold); color: #4d3a18; box-shadow: 0 10px 24px rgba(0,0,0,.18); font-size: 9px; font-weight: 800; }
.community-publish svg { width: 18px; height: 18px; }
.community-feature-wrap { margin-bottom: 18px; }
.community-feature-wrap .section-overline { padding-left: 4px; }
.community-filters { display: flex; gap: 7px; margin: 0 -15px 16px; padding: 0 15px; overflow-x: auto; scrollbar-width: none; }
.community-filters::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 32px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 10px; }
.filter-chip.active { border-color: rgba(242,199,109,.45); background: var(--gold); color: #493714; font-weight: 800; }
.community-feed { display: grid; gap: 13px; }
.community-card { display: block; overflow: hidden; border: 1px solid rgba(220,242,241,.09); border-radius: 8px; background: #0b2a3b; cursor: pointer; transition: transform .18s var(--ease), border-color .18s var(--ease); }
.community-card:hover { transform: translateY(-2px); border-color: rgba(242,199,109,.34); }
.community-card:focus-visible { outline: 3px solid rgba(242,199,109,.45); outline-offset: 2px; }
.community-image-wrap { height: 178px; position: relative; overflow: hidden; background: #0e3546; }
.community-card.featured .community-image-wrap { height: 228px; }
.community-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s var(--ease); }
.community-card:hover img { transform: scale(1.025); }
.image-tag, .featured-tag { position: absolute; top: 10px; padding: 6px 8px; border-radius: 6px; backdrop-filter: blur(10px); font-size: 9px; font-weight: 750; }
.image-tag { left: 10px; background: rgba(4,23,34,.72); color: white; }
.featured-tag { right: 10px; display: flex; align-items: center; gap: 4px; background: rgba(242,199,109,.92); color: #493714; }
.featured-tag svg { width: 11px; height: 11px; }
.community-card-body { padding: 14px; }
.community-author { display: flex; align-items: center; gap: 8px; }
.author-avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(242,199,109,.3); border-radius: 50%; background: #153f50; color: var(--gold-bright); font-size: 10px; font-weight: 800; }
.community-author strong, .community-author small { display: block; }
.community-author strong { font-size: 10px; }
.community-author small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }
.community-card h3 { margin: 12px 0 0; color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 750; text-wrap: pretty; }
.community-card.featured h3 { font-size: 18px; }
.community-card p { display: -webkit-box; overflow: hidden; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-meta { display: flex; align-items: center; gap: 12px; margin-top: 13px; color: var(--muted-2); font-size: 9px; }
.community-meta span { display: flex; align-items: center; gap: 4px; }
.community-meta svg { width: 12px; height: 12px; }
.community-meta .read-more { margin-left: auto; color: var(--gold-bright); }
.post-detail-image { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; border-radius: 8px; }
.post-detail-author { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.post-detail-author strong, .post-detail-author small { display: block; }
.post-detail-author strong { font-size: 11px; }
.post-detail-author small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.post-detail-stats { display: flex; align-items: center; margin-left: auto; color: var(--muted); font-size: 9px; }
.post-detail-stats svg { width: 12px; height: 12px; }
.post-detail-body { margin: 16px 0 0; color: #d8e7e5; font-size: 12px; line-height: 1.85; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.post-tags span { padding: 5px 8px; border-radius: 6px; background: rgba(242,199,109,.1); color: var(--gold-bright); font-size: 9px; }
.community-sample-note { margin-top: 13px; color: var(--muted-2); font-size: 9px; line-height: 1.55; }
.field-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.visually-hidden { width: 1px !important; height: 1px !important; position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.image-upload-control { min-height: 65px; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px dashed rgba(242,199,109,.38); border-radius: 10px; background: rgba(242,199,109,.055); color: var(--gold-bright) !important; cursor: pointer; }
.image-upload-control > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.image-upload-control span, .image-upload-control strong, .image-upload-control small { display: block; }
.image-upload-control strong { color: var(--ink); font-size: 11px; }
.image-upload-control small { margin-top: 4px; color: var(--muted-2); font-size: 8px; font-weight: 500; }
.post-upload-preview { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 8px; background: #072131; }
.post-upload-preview[hidden] { display: none; }
.post-upload-preview img { width: 58px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; }
.post-upload-preview span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.empty-state.small { min-height: 250px; padding: 45px 20px; border: 1px dashed var(--line); border-radius: 8px; }

@media (max-width: 560px) {
  .app-shell { padding: 0; }
  .app-frame { width: 100%; height: 100vh; min-height: 100vh; border-radius: 0; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 91vh; border-radius: 18px 18px 0 0; }
}
@media (min-width: 561px) and (max-height: 760px) { .app-frame { min-height: 660px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.author-avatar svg { width: 15px; height: 15px; }
.pet-detail-hero { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(220,242,241,.1); border-radius: 14px; background: #0e3546; }
.pet-detail-hero > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #e8b998; color: #755037; }
.pet-detail-hero > span svg { width: 24px; height: 24px; }
.pet-detail-hero strong, .pet-detail-hero small { display: block; }
.pet-detail-hero strong { font-size: 16px; }
.pet-detail-hero small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.pet-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.pet-detail-grid div { padding: 11px 9px; border-radius: 10px; background: #072131; }
.pet-detail-grid span, .pet-detail-grid strong { display: block; }
.pet-detail-grid span { color: var(--muted-2); font-size: 9px; }
.pet-detail-grid strong { margin-top: 5px; color: var(--ice); font-size: 11px; line-height: 1.35; }
.order-list { display: grid; gap: 8px; }
.order-list-row { width: 100%; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 10px; border: 1px solid rgba(220,242,241,.1); border-radius: 12px; background: #0e3546; text-align: left; }
.order-list-row:hover { border-color: rgba(242,199,109,.38); background: #123e50; }
.order-list-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: rgba(242,199,109,.12); color: var(--gold-bright); }
.order-list-icon svg { width: 16px; height: 16px; }
.order-list-copy { min-width: 0; flex: 1; }
.order-list-copy strong, .order-list-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-list-copy strong { color: var(--ink); font-size: 11px; }
.order-list-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.order-list-row > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted-2); }
.member-benefits { display: grid; gap: 8px; }
.member-benefits > div { display: grid; grid-template-columns: 33px 1fr; align-items: center; column-gap: 9px; padding: 11px 12px; border: 1px solid rgba(220,242,241,.1); border-radius: 11px; background: #0e3546; }
.member-benefits > div > span { width: 29px; height: 29px; display: grid; place-items: center; grid-row: span 2; border-radius: 9px; background: rgba(242,199,109,.12); color: var(--gold-bright); }
.member-benefits svg { width: 15px; height: 15px; }
.member-benefits strong { font-size: 11px; }
.member-benefits small { margin-top: 3px; color: var(--muted); font-size: 9px; }

/* 首页服务入口：用编号、层次和路径感替代普通四宫格图标 */
.service-grid.service-grid-creative { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.service-grid-creative .service-button { min-height: 78px; position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) 15px; grid-template-rows: 1fr 1fr; grid-template-areas: "index icon tail" "index copy tail"; align-items: center; justify-items: start; padding: 11px 10px; overflow: hidden; border: 1px solid rgba(6,28,42,.08); border-radius: 17px; background: #f5f5ec; text-align: left; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.service-grid-creative .service-button::after { content: ""; width: 52px; height: 52px; position: absolute; right: -17px; bottom: -20px; border: 1px solid rgba(6,28,42,.1); border-radius: 50%; pointer-events: none; }
.service-grid-creative .service-button:hover { transform: translateY(-2px); border-color: rgba(6,28,42,.2); box-shadow: 0 8px 15px rgba(6,28,42,.09); }
.service-grid-creative .service-index { grid-area: index; align-self: start; color: #71868a; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.service-grid-creative .service-icon { grid-area: icon; width: 26px; height: 26px; align-self: end; border-radius: 9px; background: transparent; color: #126b8d; font-size: 19px; }
.service-grid-creative .service-copy { grid-area: copy; min-width: 0; align-self: start; }
.service-grid-creative .service-copy strong, .service-grid-creative .service-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-grid-creative .service-copy strong { color: #102f3d; font-size: 12px; font-weight: 850; }
.service-grid-creative .service-copy small { margin-top: 3px; color: #71868a; font-size: 8px; }
.service-grid-creative .service-tail { grid-area: tail; align-self: end; color: #71868a; }
.service-grid-creative .service-tail svg { width: 13px; height: 13px; }
.service-grid-creative .service-card-air { background: linear-gradient(135deg, #eaf6f6, #f8f4e8); }
.service-grid-creative .service-card-rail { background: linear-gradient(135deg, #fbf5e6, #f5f0e7); }
.service-grid-creative .service-card-pickup { background: linear-gradient(135deg, #eef7f0, #f5f5ec); }
.service-grid-creative .service-card-guide { background: linear-gradient(135deg, #f9eeeb, #f5f5ec); }
.service-grid-creative .service-card-rail .service-icon { color: #a6772a; }
.service-grid-creative .service-card-pickup .service-icon { color: #3d927d; }
.service-grid-creative .service-card-guide .service-icon { color: #b86e68; }

/* 弹层使用独立进出场状态，避免切换时卡顿或突然闪现 */
.modal-backdrop { opacity: 0; pointer-events: none; transition: opacity .19s var(--ease); }
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal { opacity: 0; transform: translateY(12px) scale(.985); animation: none; will-change: transform, opacity; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.modal-backdrop.is-open .modal { opacity: 1; transform: translateY(0) scale(1); }
.modal-primary, .modal-secondary, .pay-button, .service-button, .order-list-row { transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.modal-primary:active, .modal-secondary:active, .pay-button:active { transform: scale(.98); }

.payment-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 14px; border: 1px solid rgba(242,199,109,.3); border-radius: 15px; background: linear-gradient(135deg, rgba(242,199,109,.13), rgba(14,53,70,.82)); }
.payment-card.is-paid { border-color: rgba(141,225,207,.28); background: rgba(141,225,207,.08); }
.payment-copy { min-width: 0; }
.payment-copy span, .payment-copy strong, .payment-copy small { display: block; }
.payment-copy span { color: var(--gold); font-size: 9px; }
.payment-copy strong { margin-top: 4px; color: var(--ink); font-size: 14px; }
.payment-copy small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.pay-button { min-height: 38px; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 0 12px; border-radius: 10px; background: var(--gold); color: #4d3a18; font-size: 10px; font-weight: 850; }
.pay-button:hover { background: var(--gold-bright); box-shadow: 0 7px 15px rgba(242,199,109,.2); }
.pay-button svg { width: 13px; height: 13px; }
.paid-mark { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--mint); font-size: 10px; font-weight: 800; }
.paid-mark svg { width: 15px; height: 15px; }

@media (max-width: 350px) {
  .service-grid-creative .service-button { min-height: 72px; padding: 9px 8px; grid-template-columns: 26px minmax(0, 1fr) 13px; }
  .service-grid-creative .service-copy strong { font-size: 11px; }
  .service-grid-creative .service-copy small { font-size: 7px; }
  .payment-card { align-items: flex-start; flex-direction: column; }
  .pay-button { width: 100%; justify-content: center; }
}

/* 中国路线图与自动调度信息：城市可选，详细地址自由填写，车辆不让用户操心 */
.quote-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.quote-address-field > div { background: rgba(6,31,45,.9); }
.quote-address-field input { font-size: 9px; }
.auto-dispatch-note { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 10px 11px; border: 1px solid rgba(141,225,207,.18); border-radius: 12px; background: linear-gradient(135deg, rgba(18,76,84,.46), rgba(6,34,48,.78)); }
.auto-dispatch-note > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--gold-bright); }
.auto-dispatch-note > div { min-width: 0; flex: 1; }
.auto-dispatch-note strong, .auto-dispatch-note small { display: block; }
.auto-dispatch-note strong { color: var(--ice); font-size: 9px; }
.auto-dispatch-note small { margin-top: 3px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.auto-dispatch-note > b { flex: 0 0 auto; padding: 4px 6px; border-radius: 99px; background: rgba(141,225,207,.1); color: var(--mint); font-size: 7px; white-space: nowrap; }
.quote-map-preview.quote-china-map { height: 218px; padding: 10px 10px 9px; border-color: rgba(141,225,207,.22); background: radial-gradient(circle at 32% 45%, rgba(30,111,119,.25), transparent 40%), linear-gradient(145deg, #0c3c4b, #082938 68%, #061c2b); }
.quote-china-map .quote-map-grid, .quote-china-map .quote-map-orbit, .quote-china-map .quote-map-route, .quote-china-map .quote-map-point { display: none; }
.china-map-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(222,242,234,.72); font-size: 8px; }
.china-map-topline span { display: inline-flex; align-items: center; gap: 5px; }
.china-map-topline svg { width: 12px; height: 12px; color: var(--mint); }
.china-map-topline b { padding: 4px 6px; border-radius: 99px; background: rgba(242,199,109,.1); color: var(--gold-bright); font-size: 7px; font-weight: 700; white-space: nowrap; }
.china-map-svg { width: 100%; height: 147px; display: block; overflow: visible; }
.china-land { fill: url(#chinaLandGradient); stroke: rgba(141,225,207,.4); stroke-width: 1.2; filter: drop-shadow(0 6px 9px rgba(0,0,0,.2)); }
.province-line { fill: none; stroke: rgba(141,225,207,.18); stroke-width: .8; stroke-linecap: round; }
.china-route { fill: none; stroke: var(--gold-bright); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 5; filter: drop-shadow(0 0 4px rgba(242,199,109,.72)); animation: quote-route-dash 1.15s linear infinite; }
.china-route-halo { fill: var(--gold-bright); stroke: #082b38; stroke-width: 2.8; filter: drop-shadow(0 0 4px rgba(242,199,109,.7)); }
#quoteMapDestination { fill: var(--mint); filter: drop-shadow(0 0 4px rgba(141,225,207,.65)); }
.china-city-dot { fill: rgba(220,242,232,.65); }
.quote-map-vehicle { fill: #fff8db; stroke: #b77b2a; stroke-width: 1.4; opacity: 0; }
.quote-map-vehicle.is-moving { opacity: 1; animation: quote-vehicle-travel 3.8s ease-in-out infinite; }
@keyframes quote-route-dash { to { stroke-dashoffset: -20; } }
@keyframes quote-vehicle-travel { 0% { offset-distance: 0%; opacity: .25; } 16%, 78% { offset-distance: 78%; opacity: 1; } 100% { offset-distance: 100%; opacity: .25; } }
.quote-china-map .quote-map-city { bottom: auto; top: auto; padding: 3px 5px; border: 1px solid rgba(220,242,241,.14); border-radius: 6px; background: rgba(4,22,33,.78); font-size: 8px; }
.quote-china-map .quote-map-city.origin { left: 21px; bottom: 43px; }
.quote-china-map .quote-map-city.destination { right: 20px; top: 47px; }
.quote-china-map .quote-map-distance { top: auto; left: 50%; bottom: 41px; padding: 4px 6px; font-size: 7px; }
.quote-route-headline { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.quote-route-headline strong { color: var(--ice); font-size: 11px; letter-spacing: -.02em; }
.quote-route-headline small { min-width: 0; overflow: hidden; color: var(--muted-2); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 350px) {
  .quote-address-grid { grid-template-columns: 1fr; }
  .quote-map-preview.quote-china-map { height: 224px; }
  .quote-route-headline { display: block; }
  .quote-route-headline small { display: block; margin-top: 2px; }
}

/* 独立报价页：把路线、规则和费用放在同一个连续的工作流里 */
.bottom-nav[hidden] { display: none; }
.quote-screen { min-height: 100%; padding: 113px 15px 28px; background: #061c2a; }
.quote-page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quote-page-intro h1 { margin: 8px 0 0; color: var(--ink); font-size: 28px; line-height: 1.14; letter-spacing: -.055em; }
.quote-page-intro h1 em { color: var(--gold-bright); font-style: normal; }
.quote-page-intro p { max-width: 272px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.quote-live-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 7px 8px; border: 1px solid rgba(141,225,207,.26); border-radius: 9px; background: rgba(141,225,207,.08); color: var(--mint); font-size: 8px; white-space: nowrap; }
.quote-live-badge svg { width: 12px; height: 12px; }
.quote-progress { display: grid; grid-template-columns: auto minmax(9px, 1fr) auto minmax(9px, 1fr) auto minmax(9px, 1fr) auto; align-items: start; gap: 5px; margin: 21px 0 13px; }
.quote-progress span { min-width: 37px; color: var(--muted-2); text-align: center; }
.quote-progress b, .quote-progress strong { display: block; }
.quote-progress b { width: 22px; height: 22px; display: grid; place-items: center; margin: 0 auto; border: 1px solid rgba(220,242,241,.16); border-radius: 50%; font-size: 8px; font-weight: 800; }
.quote-progress strong { margin-top: 5px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.quote-progress i { height: 1px; margin-top: 11px; background: rgba(220,242,241,.16); }
.quote-progress .active { color: var(--gold-bright); }
.quote-progress .active b { border-color: rgba(242,199,109,.64); background: rgba(242,199,109,.16); }
.quote-layout { display: grid; gap: 12px; }
.quote-form-column { display: grid; gap: 12px; }
.quote-panel, .quote-summary { border: 1px solid rgba(220,242,241,.12); border-radius: 18px; background: linear-gradient(155deg, rgba(13,52,68,.96), rgba(7,32,46,.98)); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.quote-panel { padding: 15px; }
.quote-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.quote-panel-head > div { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.quote-step { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(242,199,109,.4); border-radius: 9px; color: var(--gold-bright); font-size: 9px; font-weight: 800; }
.quote-panel h2 { margin: 1px 0 0; color: var(--ice); font-size: 13px; letter-spacing: -.02em; }
.quote-panel-head p { margin: 4px 0 0; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.quote-pet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.quote-pet-card { min-width: 0; position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 7px; border: 1px solid rgba(220,242,241,.1); border-radius: 12px; background: rgba(5,26,40,.56); text-align: left; }
.quote-pet-card:hover, .quote-pet-card.active { border-color: rgba(242,199,109,.62); background: rgba(83,70,39,.32); }
.quote-pet-card > span:nth-child(2) { min-width: 0; }
.quote-pet-card strong, .quote-pet-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-pet-card strong { color: var(--ice); font-size: 10px; }
.quote-pet-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.quote-pet-card > b { position: absolute; top: 6px; right: 5px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); color: #4a3718; }
.quote-pet-card > b svg { width: 9px; height: 9px; }
.quote-pet-avatar { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(141,225,207,.13); color: var(--mint); }
.quote-pet-avatar svg { width: 14px; height: 14px; }
.quote-inline-fields, .quote-detail-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.quote-field { display: block; min-width: 0; }
.quote-field > span { display: block; margin: 0 0 6px 2px; color: var(--muted-2); font-size: 9px; }
.quote-field > div { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid rgba(177,225,220,.15); border-radius: 11px; background: rgba(5,26,40,.72); }
.quote-field > div:focus-within { border-color: rgba(242,199,109,.68); box-shadow: 0 0 0 3px rgba(242,199,109,.08); }
.quote-field > div > svg:first-child { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mint); }
.quote-field > div > svg:last-child { width: 13px; height: 13px; flex: 0 0 auto; color: var(--muted); }
.quote-field input, .quote-field select { min-width: 0; width: 100%; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ice); font-size: 10px; }
.quote-field select { appearance: none; }
.quote-field input[type="date"] { color-scheme: dark; }
.quote-field em { flex: 0 0 auto; color: var(--gold-bright); font-size: 9px; font-style: normal; }
.quote-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quote-mode-card { min-width: 0; min-height: 58px; position: relative; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(220,242,241,.11); border-radius: 12px; background: rgba(5,26,40,.62); text-align: left; }
.quote-mode-card:hover, .quote-mode-card.active { border-color: rgba(242,199,109,.65); background: linear-gradient(135deg, rgba(75,68,39,.65), rgba(8,46,59,.9)); }
.quote-mode-card > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--mint); }
.quote-mode-card.active > svg { color: var(--gold-bright); }
.quote-mode-card span { min-width: 0; }
.quote-mode-card strong, .quote-mode-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-mode-card strong { color: var(--ice); font-size: 10px; }
.quote-mode-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.quote-mode-card > b { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); color: #4d3915; }
.quote-mode-card > b svg { width: 9px; height: 9px; }
.quote-route-fields { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); align-items: end; gap: 7px; }
.quote-route-arrow { width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 10px; color: var(--gold-bright); }
.quote-route-arrow svg { width: 15px; height: 15px; }
.quote-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.quote-service { position: relative; min-width: 0; }
.quote-service input { position: absolute; opacity: 0; pointer-events: none; }
.quote-service > span { min-height: 60px; display: grid; grid-template-columns: 17px minmax(0,1fr); align-content: center; column-gap: 6px; padding: 8px 8px 8px 10px; border: 1px solid rgba(220,242,241,.1); border-radius: 11px; background: rgba(5,26,40,.62); }
.quote-service > span > svg { width: 15px; height: 15px; grid-row: span 2; color: var(--gold-bright); }
.quote-service b, .quote-service small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-service b { color: var(--ice); font-size: 9px; }
.quote-service small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.quote-service input:checked + span { border-color: rgba(242,199,109,.58); background: rgba(82,71,40,.33); box-shadow: inset 0 0 0 1px rgba(242,199,109,.1); }
.quote-summary { order: -1; padding: 15px; }
.quote-summary-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.quote-summary-top h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.04em; }
.quote-db-mark { display: inline-flex; align-items: center; gap: 4px; padding: 6px 7px; border-radius: 8px; background: rgba(141,225,207,.08); color: var(--mint); font-size: 8px; white-space: nowrap; }
.quote-db-mark svg { width: 12px; height: 12px; }
.quote-map-preview { height: 137px; position: relative; overflow: hidden; margin-top: 14px; border: 1px solid rgba(141,225,207,.2); border-radius: 15px; background: radial-gradient(circle at 68% 42%, rgba(53,140,153,.42), transparent 33%), linear-gradient(145deg, #0c3a4d, #082736 68%, #061c2a); }
.quote-map-grid { position: absolute; inset: 0; opacity: .44; background-image: linear-gradient(rgba(141,225,207,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(141,225,207,.12) 1px, transparent 1px); background-size: 25px 25px; transform: perspective(100px) rotateX(48deg) scale(1.35); transform-origin: center bottom; }
.quote-map-orbit { position: absolute; border: 1px solid rgba(141,225,207,.35); border-radius: 50%; transform: rotate(-19deg); }
.quote-map-orbit.orbit-one { width: 230px; height: 112px; left: -28px; top: 10px; }
.quote-map-orbit.orbit-two { width: 255px; height: 137px; left: -35px; top: 0; border-color: rgba(242,199,109,.35); }
.quote-map-route { position: absolute; left: 46px; right: 54px; top: 74px; border-top: 1px dashed var(--gold-bright); transform: rotate(-16deg); transform-origin: center; }
.quote-map-route::after { content: ""; position: absolute; right: 1px; top: -4px; width: 7px; height: 7px; border-top: 1px solid var(--gold-bright); border-right: 1px solid var(--gold-bright); transform: rotate(45deg); }
.quote-map-point { width: 11px; height: 11px; position: absolute; z-index: 1; border: 3px solid #0a3342; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 2px rgba(242,199,109,.28); }
.quote-map-point.point-origin { left: 36px; bottom: 27px; }
.quote-map-point.point-destination { right: 39px; top: 28px; background: var(--mint); box-shadow: 0 0 0 2px rgba(141,225,207,.22); }
.quote-map-city { position: absolute; z-index: 1; color: var(--ice); font-size: 9px; }
.quote-map-city.origin { left: 29px; bottom: 12px; }
.quote-map-city.destination { right: 26px; top: 13px; }
.quote-map-distance { position: absolute; left: 50%; top: 50%; padding: 5px 7px; border: 1px solid rgba(242,199,109,.22); border-radius: 7px; background: rgba(3,22,33,.7); color: var(--gold-bright); font-size: 8px; transform: translate(-50%, -50%); white-space: nowrap; }
.quote-estimate { min-height: 134px; margin-top: 11px; padding: 12px; border: 1px solid rgba(220,242,241,.1); border-radius: 13px; background: rgba(5,26,40,.65); }
.quote-empty, .quote-loading { min-height: 109px; display: grid; place-items: center; align-content: center; text-align: center; }
.quote-empty > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 7px; border-radius: 11px; background: rgba(242,199,109,.12); color: var(--gold-bright); }
.quote-empty > span svg { width: 18px; height: 18px; }
.quote-empty strong, .quote-loading strong { color: var(--ice); font-size: 11px; }
.quote-empty small, .quote-loading small { max-width: 230px; margin-top: 5px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.quote-error > span { background: rgba(255,128,96,.12); color: var(--coral); }
.quote-loading > span { width: 20px; height: 20px; margin-bottom: 8px; border: 2px solid rgba(141,225,207,.2); border-top-color: var(--mint); border-radius: 50%; animation: quote-spin .75s linear infinite; }
@keyframes quote-spin { to { transform: rotate(360deg); } }
.quote-total { padding-bottom: 10px; border-bottom: 1px solid rgba(220,242,241,.1); }
.quote-total span, .quote-total strong, .quote-total small { display: block; }
.quote-total span { color: var(--muted); font-size: 9px; }
.quote-total strong { margin-top: 4px; color: var(--gold-bright); font-size: 29px; line-height: 1; letter-spacing: -.05em; }
.quote-total small { margin-top: 7px; color: var(--muted-2); font-size: 8px; }
.quote-lines { max-height: 126px; overflow: auto; padding-top: 8px; scrollbar-width: thin; }
.quote-lines div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; color: var(--muted); font-size: 8px; }
.quote-lines b { flex: 0 0 auto; color: var(--ice); font-size: 9px; }
.quote-calculation { margin-top: 7px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.quote-summary-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 11px; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.quote-summary-note svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--mint); }
.quote-order-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; border-radius: 12px; background: linear-gradient(135deg, #f7cf79, #e9aa53); color: #46351b; font-size: 11px; font-weight: 850; box-shadow: 0 9px 20px rgba(230,169,82,.18); transition: opacity .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.quote-order-button svg { width: 15px; height: 15px; }
.quote-order-button:hover:not(:disabled) { box-shadow: 0 11px 23px rgba(230,169,82,.28); transform: translateY(-1px); }
.quote-order-button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
.quote-back-button { width: 100%; min-height: 34px; margin-top: 4px; background: transparent; color: var(--muted); font-size: 9px; }

@media (max-width: 350px) {
  .quote-screen { padding-left: 11px; padding-right: 11px; }
  .quote-page-intro h1 { font-size: 25px; }
  .quote-page-intro p { font-size: 10px; }
  .quote-live-badge { padding: 6px; }
  .quote-live-badge span { display: none; }
  .quote-panel, .quote-summary { padding: 12px; }
  .quote-pet-grid { grid-template-columns: 1fr 1fr; }
  .quote-inline-fields, .quote-detail-fields { grid-template-columns: 1fr; }
  .quote-route-fields { grid-template-columns: minmax(0,1fr) 17px minmax(0,1fr); gap: 4px; }
  .quote-route-arrow { width: 17px; }
  .quote-route-arrow svg { width: 13px; }
}

/* 首页路线入口：让图标、图片和按钮落在同一套夜航视觉里 */
.home-dock { border: 1px solid rgba(203,235,235,.2); background: linear-gradient(135deg, rgba(5,27,42,.94), rgba(10,50,65,.91)); color: var(--ink); box-shadow: 0 18px 42px rgba(1,14,23,.42); }
.home-dock::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .38; pointer-events: none; background-image: linear-gradient(rgba(183,229,225,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(183,229,225,.08) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(135deg, rgba(0,0,0,.9), transparent 72%); }
.dock-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.dock-heading span { display: block; color: rgba(206,235,232,.64); font-size: 8px; letter-spacing: .1em; }
.dock-heading strong { display: block; margin-top: 4px; color: #f6fbf5; font-size: 13px; letter-spacing: -.02em; }
.dock-orbit { width: 31px; height: 31px; display: grid !important; place-items: center; border: 1px solid rgba(242,199,109,.45); border-radius: 50%; background: rgba(242,199,109,.09); color: var(--gold-bright) !important; font-size: 15px !important; }
.dock-orbit svg { width: 16px; height: 16px; }
.service-grid.service-grid-creative { position: relative; z-index: 1; }
.service-grid-creative .service-button { border-color: rgba(207,237,232,.16); background: rgba(13,57,72,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.service-grid-creative .service-button::after { border-color: rgba(199,236,232,.2); }
.service-grid-creative .service-button::before { content: ""; width: 25px; height: 25px; position: absolute; right: 10px; top: 9px; border: 1px dashed rgba(224,243,235,.18); border-radius: 50%; pointer-events: none; }
.service-grid-creative .service-button:hover { border-color: rgba(242,199,109,.58); background: rgba(21,72,84,.92); box-shadow: 0 9px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1); }
.service-grid-creative .service-index { color: rgba(213,239,234,.56); }
.service-grid-creative .service-icon { width: 29px; height: 29px; position: relative; z-index: 1; align-self: end; border: 1px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.05); color: #9cdeed; box-shadow: 0 0 0 4px rgba(144,224,230,.05); }
.service-grid-creative .service-icon svg { width: 16px; height: 16px; }
.service-grid-creative .service-copy strong { color: #f4fbf6; }
.service-grid-creative .service-copy small { color: rgba(210,235,231,.64); }
.service-grid-creative .service-tail { color: rgba(242,199,109,.86); }
.service-grid-creative .service-card-air { background: linear-gradient(135deg, rgba(15,74,92,.9), rgba(11,46,65,.78)); }
.service-grid-creative .service-card-rail { background: linear-gradient(135deg, rgba(75,67,45,.72), rgba(18,53,65,.82)); }
.service-grid-creative .service-card-pickup { background: linear-gradient(135deg, rgba(28,81,76,.8), rgba(12,54,68,.82)); }
.service-grid-creative .service-card-guide { background: linear-gradient(135deg, rgba(80,57,58,.68), rgba(13,53,67,.83)); }
.service-grid-creative .service-card-rail .service-icon { color: #f1c96d; }
.service-grid-creative .service-card-pickup .service-icon { color: #93e0c8; }
.service-grid-creative .service-card-guide .service-icon { color: #ffb5a5; }
.hero-cta { position: relative; z-index: 1; background: linear-gradient(105deg, #f3c86d, #ffe0a0); color: #213d48; box-shadow: 0 9px 22px rgba(242,199,109,.25); }
.hero-cta:hover { background: linear-gradient(105deg, #ffe0a0, #f3c86d); }
.hero-cta span { font-weight: 850; }

/* 路线报价：从普通表单升级为可连续操作的路线规划面板 */
.modal:has(.booking-shell) { width: min(430px, 100%); max-height: min(790px, 94vh); padding: 0; overflow: auto; border-color: rgba(168,224,221,.2); background: #061d2b; }
.booking-shell { padding: 21px 19px 18px; background: radial-gradient(circle at 100% 0, rgba(42,128,145,.18), transparent 34%), #061d2b; }
.booking-head { display: flex; align-items: start; justify-content: space-between; gap: 13px; }
.booking-kicker { display: block; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.booking-head h2 { margin-top: 7px; }
.booking-head p { max-width: 285px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.booking-visual { position: relative; overflow: hidden; margin: 17px 0 18px; padding: 13px 14px 12px; border: 1px solid rgba(166,224,220,.2); border-radius: 18px; background: linear-gradient(135deg, rgba(16,74,88,.9), rgba(6,35,51,.96)); }
.booking-visual::before, .booking-visual::after { content: ""; position: absolute; border: 1px solid rgba(183,234,225,.16); border-radius: 50%; pointer-events: none; }
.booking-visual::before { width: 150px; height: 150px; right: -62px; top: -82px; }
.booking-visual::after { width: 220px; height: 220px; right: -96px; top: -117px; }
.booking-visual-glow { width: 82px; height: 82px; position: absolute; right: 18px; bottom: -43px; border-radius: 50%; background: rgba(242,199,109,.15); filter: blur(2px); }
.booking-visual-top, .booking-visual-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: rgba(222,242,234,.7); font-size: 8px; }
.booking-visual-top span { display: flex; align-items: center; gap: 5px; color: var(--gold-bright); font-weight: 800; }
.booking-visual-top svg { width: 12px; height: 12px; }
.booking-visual-top b { padding: 4px 6px; border-radius: 99px; background: rgba(141,225,207,.1); color: var(--mint); font-size: 8px; font-weight: 700; }
.booking-route-line { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; gap: 7px; margin: 17px 0 14px; }
.booking-stop { min-width: 0; }
.booking-stop.end { text-align: right; }
.booking-stop i { width: 7px; height: 7px; display: block; margin-bottom: 5px; border: 2px solid #0a3241; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 2px rgba(242,199,109,.38); }
.booking-stop.end i { margin-left: auto; background: var(--mint); box-shadow: 0 0 0 2px rgba(141,225,207,.3); }
.booking-stop small, .booking-stop strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-stop small { color: rgba(219,241,233,.55); font-size: 8px; }
.booking-stop strong { margin-top: 3px; color: #f7fbf4; font-size: 14px; }
.booking-dash { position: relative; height: 1px; border-top: 1px dashed rgba(242,199,109,.74); }
.booking-dash span { width: 20px; height: 20px; position: absolute; left: calc(50% - 10px); top: -11px; display: grid; place-items: center; border: 1px solid rgba(242,199,109,.7); border-radius: 50%; background: #0b3d4e; color: var(--gold-bright); }
.booking-dash svg { width: 11px; height: 11px; }
.booking-visual-bottom { color: rgba(217,240,232,.54); }
.booking-visual-bottom span { display: flex; align-items: center; gap: 5px; }
.booking-visual-bottom svg { width: 11px; height: 11px; }
.booking-visual-bottom strong { color: rgba(247,218,149,.9); font-size: 9px; }
.booking-block { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(198,232,227,.1); }
.booking-block-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; }
.booking-block-head > div { display: flex; align-items: center; gap: 9px; }
.booking-step { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(242,199,109,.4); border-radius: 8px; color: var(--gold-bright); font-size: 9px; font-weight: 800; }
.booking-block-head strong, .booking-block-head small { display: block; }
.booking-block-head strong { color: var(--ice); font-size: 12px; }
.booking-block-head small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.add-pet-button { display: inline-flex; align-items: center; gap: 4px; padding: 7px 8px; border: 1px solid rgba(242,199,109,.34); border-radius: 8px; background: rgba(242,199,109,.08); color: var(--gold-bright); font-size: 9px; font-weight: 800; }
.add-pet-button svg { width: 12px; height: 12px; }
.booking-pet-select, .booking-city-field > div, .booking-detail-field > div { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 0 11px; border: 1px solid rgba(177,225,220,.16); border-radius: 11px; background: rgba(8,42,57,.88); }
.booking-pet-select:focus-within, .booking-city-field > div:focus-within, .booking-detail-field > div:focus-within { border-color: rgba(242,199,109,.7); box-shadow: 0 0 0 3px rgba(242,199,109,.08); }
.booking-pet-select > svg:last-child { width: 14px; color: var(--muted); }
.booking-field-icon { color: var(--gold-bright); font-size: 17px; }
.booking-field-icon svg { width: 18px; height: 18px; }
.booking-pet-select select, .booking-city-field select, .booking-detail-field select, .booking-detail-field input { min-width: 0; flex: 1; height: 43px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.booking-pet-select select, .booking-city-field select, .booking-detail-field select { appearance: none; }
.mode-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-choice { min-height: 54px; position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(177,225,220,.13); border-radius: 11px; background: rgba(8,42,57,.7); color: var(--muted); text-align: left; }
.mode-choice > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #8bd9dd; }
.mode-choice span { min-width: 0; }
.mode-choice strong, .mode-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-choice strong { color: var(--ice); font-size: 10px; }
.mode-choice small { margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.mode-choice > b { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); color: #4d3915; }
.mode-choice > b svg { width: 9px; height: 9px; }
.mode-choice.active { border-color: rgba(242,199,109,.62); background: linear-gradient(135deg, rgba(74,72,43,.8), rgba(10,57,69,.88)); box-shadow: inset 0 0 0 1px rgba(242,199,109,.1); }
.mode-choice.active > svg { color: var(--gold-bright); }
.booking-hidden-select { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.booking-route-fields { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); align-items: end; gap: 7px; }
.booking-city-field label, .booking-detail-field label { display: block; margin: 0 0 6px 2px; color: var(--muted-2); font-size: 9px; }
.booking-city-field > div, .booking-detail-field > div { min-width: 0; min-height: 42px; padding: 0 8px; }
.booking-city-field > div > svg, .booking-detail-field > div > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mint); }
.booking-city-field:last-child > div > svg { color: var(--coral); }
.route-swap { width: 18px; height: 18px; display: grid; place-items: center; margin-bottom: 12px; color: var(--gold-bright); }
.route-swap svg { width: 14px; height: 14px; }
.booking-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.booking-detail-field input { font-family: inherit; }
.booking-check-grid { margin-top: 0; gap: 7px; }
.booking-check-grid .check-item { min-height: 53px; position: relative; padding: 7px 7px 7px 28px; border: 1px solid rgba(177,225,220,.1); background: rgba(8,42,57,.65); }
.booking-check-grid .check-item input { position: absolute; left: 9px; top: 20px; }
.booking-check-grid .check-item > span { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 4px; row-gap: 3px; }
.booking-check-grid .check-item > span > svg { width: 15px; height: 15px; grid-row: span 2; color: var(--gold-bright); }
.booking-check-grid .check-item b, .booking-check-grid .check-item small { display: block; }
.booking-check-grid .check-item b { color: var(--ice); font-size: 9px; }
.booking-check-grid .check-item small { color: var(--muted-2); font-size: 8px; }
.booking-check-grid .check-item:has(input:checked) { border-color: rgba(242,199,109,.45); background: rgba(82,71,40,.35); }
.estimate-result { border: 1px solid rgba(141,225,207,.13); background: linear-gradient(135deg, rgba(14,64,78,.78), rgba(8,40,54,.82)); }
.estimate-placeholder { display: block; color: var(--ice); font-size: 11px; font-weight: 700; }
.estimate-result > small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 8px; line-height: 1.5; }
.booking-actions { position: sticky; bottom: -1px; z-index: 2; margin: 17px -19px -18px; padding: 13px 19px 18px; border-top: 1px solid rgba(177,225,220,.1); background: linear-gradient(180deg, rgba(6,29,43,.4), #061d2b 35%); }
.booking-actions .modal-primary { flex: 1; }
.pet-form-intro { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 12px; border: 1px solid rgba(242,199,109,.18); border-radius: 12px; background: rgba(242,199,109,.07); color: var(--gold-bright); }
.pet-form-intro > svg { width: 22px; height: 22px; }
.pet-form-intro strong, .pet-form-intro small { display: block; }
.pet-form-intro strong { color: var(--ice); font-size: 11px; }
.pet-form-intro small { margin-top: 3px; color: var(--muted); font-size: 9px; }

@media (max-width: 350px) {
  .dock-heading strong { font-size: 12px; }
  .booking-route-line { grid-template-columns: 1fr 48px 1fr; }
  .booking-detail-grid { grid-template-columns: 1fr; }
  .booking-check-grid .check-item { padding-left: 23px; }
  .booking-check-grid .check-item input { left: 6px; }
}

/* assets/network/network.css */
.tn-network{--tn-brand:#2a84af;--tn-ink:#24414d;--tn-muted:#748b95;--tn-surface:#fbfdfb;--tn-soft:#eef5f4;--tn-line:#e1ece8;--tn-radius:20px;--tn-ease:cubic-bezier(.23,1,.32,1);color:var(--tn-ink);background:var(--tn-surface);border:1px solid var(--tn-line);border-radius:var(--tn-radius);overflow:hidden;text-align:left;font-family:inherit;font-size:13px;font-weight:400;line-height:1.55;min-width:0;isolation:isolate}
.tn-network *, .tn-network *::before,.tn-network *::after{box-sizing:border-box}.tn-network h2,.tn-network h3,.tn-network p{margin:0}.tn-network button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation;min-height:44px;transition:transform .15s var(--tn-ease),background .15s,color .15s}.tn-network button:active:not(:disabled){transform:scale(.97)}.tn-network button:focus-visible,.tn-network select:focus-visible,.tn-network a:focus-visible,.tn-network summary:focus-visible{outline:3px solid #91cbd0;outline-offset:2px}.tn-network button:disabled{opacity:.5;cursor:wait}.tn-network svg{width:18px;height:18px;flex:none}.tn-network [hidden]{display:none!important}.tn-heading{padding:20px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.tn-kicker{display:flex;align-items:center;gap:6px;color:var(--tn-brand);font-size:10px;letter-spacing:.04em;font-weight:600}.tn-kicker svg{width:13px;height:13px}.tn-heading h2{font-size:22px;line-height:1.5;font-weight:700;letter-spacing:-.035em;margin-top:5px}.tn-heading p{font-size:12px;color:var(--tn-muted);margin-top:2px}.tn-expand{display:flex;align-items:center;justify-content:center;gap:5px;flex:none;font-size:11px!important;padding:8px;border-radius:10px}.tn-expand:hover{background:var(--tn-soft)}.tn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 20px 16px;gap:8px}.tn-stats>div{padding:8px 0;border-right:1px solid var(--tn-line);min-width:0}.tn-stats>div:last-child{border:0}.tn-stats strong{display:block;font-size:25px;line-height:1.25;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.tn-stats span{display:block;font-size:10px;color:var(--tn-muted);margin-top:6px}.tn-mode-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 20px 12px;flex-wrap:wrap}.tn-data-badge{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--tn-brand);font-weight:500}.tn-data-badge:before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%}.tn-network[data-source=demo] .tn-data-badge{color:#987039}.tn-source-tabs{display:flex;gap:2px;background:var(--tn-soft);padding:2px;border-radius:8px}.tn-source-tabs button{font-size:10px;min-height:32px;padding:4px 8px;border-radius:6px;color:var(--tn-muted)}.tn-source-tabs button[aria-pressed=true]{background:white;color:var(--tn-ink);box-shadow:0 1px 3px #2341340c}.tn-map-wrap{position:relative;background:#173843;height:330px;overflow:hidden;margin:0 12px;border-radius:14px;contain:layout paint}.tn-map{position:absolute;inset:0;overflow:hidden}.tn-earth,.tn-markers{position:absolute;inset:0;display:block;width:100%;height:100%}.tn-earth{touch-action:pan-y;cursor:grab;outline-offset:-5px!important}.tn-earth:active{cursor:grabbing}.tn-markers{pointer-events:none}.tn-map-message{position:absolute;left:16px;right:16px;top:48%;color:#ebf5ed;background:#163b46d9;border-radius:8px;padding:10px 14px;z-index:3;font-size:12px;text-align:center;pointer-events:none}.tn-map-top{position:absolute;inset:12px 12px auto;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.tn-map-top span{background:#183c43b8;color:#e8f1e6;padding:4px 9px;border-radius:8px;font-size:10px}.tn-zoom{position:absolute;right:10px;top:62px;display:grid;background:#f7f9f0ed;border-radius:9px;overflow:hidden}.tn-zoom button{width:42px;min-height:42px;display:grid;place-items:center}.tn-zoom button+button{border-top:1px solid #d1dfd88c}.tn-view-controls{position:absolute;right:10px;bottom:12px;display:flex;background:#edf5e9ed;border-radius:9px;padding:2px;gap:2px}.tn-view-controls button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:36px;min-height:40px;padding:6px 9px;font-size:10px}.tn-view-controls svg{width:15px;height:15px}.tn-gesture{position:absolute;left:12px;bottom:22px;color:#d9e9e4;font-size:9px;pointer-events:none}.tn-layers{display:flex;gap:4px;padding:8px 16px 0;justify-content:space-between}.tn-layers button{font-size:10px;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;white-space:nowrap;min-height:40px;border-radius:8px;color:var(--tn-muted)}.tn-layers .is-active{background:var(--tn-soft);color:var(--tn-brand)}.tn-layers i{display:block;width:7px;height:7px;border-radius:50%}.tn-driver-dot{background:#8bbec0}.tn-order-dot{background:#e4bd7f}.tn-site-dot{background:#aaba91}.tn-city-picker{display:flex;align-items:center;gap:8px;margin:12px 20px}.tn-city-picker label{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0;background:var(--tn-soft);border-radius:10px;padding:0 12px;color:var(--tn-muted);font-size:11px}.tn-city-picker select{font:inherit;font-size:14px;min-width:0;flex:1;max-width:180px;border:0;background:transparent;color:var(--tn-ink);padding:8px 2px;min-height:44px;width:auto;outline-offset:-3px}.tn-city-picker>button{width:44px;border-radius:9px;display:grid;place-items:center;flex:none}.tn-city-picker>button:hover{background:var(--tn-soft)}.tn-city-card{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--tn-line);flex-wrap:wrap}.tn-city-symbol{width:34px;height:34px;border-radius:50%;background:var(--tn-soft);color:var(--tn-brand);display:grid;place-items:center;flex:none}.tn-city-copy{min-width:0;flex:1}.tn-city-copy h3{font-size:12px;font-weight:650;line-height:1.6}.tn-city-copy p{font-size:10px;color:var(--tn-muted);line-height:1.8;margin-top:3px;overflow-wrap:anywhere}.tn-network .tn-primary{font-size:11px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--tn-brand);color:white;border-radius:9px;padding:8px 12px;min-height:44px;flex-basis:100%}.tn-primary:hover{filter:brightness(.95)}.tn-status{padding:0 20px 12px;color:var(--tn-muted);font-size:10px;line-height:1.8;min-height:30px}.tn-sources{padding:0 20px 16px;color:var(--tn-muted);font-size:10px}.tn-sources summary{cursor:pointer;min-height:30px}.tn-sources p{margin-bottom:8px;line-height:1.9}.tn-sources a{color:var(--tn-brand);text-decoration:underline}.tn-load-error{margin:20px;padding:20px;background:#f1f7f5;color:#627e88;border-radius:14px;font-size:12px}.tn-customer-mount{margin:22px 18px 12px}.tn-customer-mount .tn-network{--tn-brand:#2d93bd}.tn-carrier{--tn-brand:var(--brand,#087d65);--tn-ink:#26413a;--tn-muted:#788f86;--tn-radius:12px;margin:0 0 24px}.tn-carrier .tn-heading{padding-top:18px}.tn-carrier .tn-heading h2{font-size:21px}.tn-dialog{position:fixed!important;inset:0!important;width:min(100vw - 40px,920px)!important;max-width:920px!important;height:min(94dvh,1000px)!important;max-height:94dvh!important;margin:auto!important;border:0!important;border-radius:22px!important;padding:0!important;background:#fbfdfb!important;overflow:auto!important;box-shadow:0 20px 90px #041c2966}.tn-dialog::backdrop{background:#092d37a3}.tn-dialog .tn-is-expanded{margin:0;border:0;min-height:100%;border-radius:0}.tn-is-expanded .tn-map-wrap{height:clamp(330px,48dvh,550px)}.tn-is-expanded .tn-heading{padding-top:max(16px,env(safe-area-inset-top))}.tn-is-expanded .tn-sources{padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(min-width:700px){.tn-carrier .tn-map-wrap{height:400px}.tn-carrier .tn-heading,.tn-carrier .tn-mode-bar{padding-inline:24px}.tn-carrier .tn-stats{margin-inline:24px;max-width:550px}.tn-carrier .tn-city-picker{max-width:420px}.tn-carrier .tn-city-card{flex-wrap:nowrap}.tn-carrier .tn-primary{flex-basis:auto}.tn-carrier .tn-layers{justify-content:flex-start;gap:12px}.tn-carrier .tn-layers button{padding-inline:16px}.tn-carrier .tn-network{max-width:100%}}
@media(max-width:359px){.tn-heading{padding-inline:16px}.tn-heading h2{font-size:20px}.tn-stats{margin-inline:16px}.tn-stats strong{font-size:23px}.tn-mode-bar{padding-inline:16px}.tn-map-wrap{height:300px;margin-inline:8px}.tn-layers{padding-inline:8px;gap:0}.tn-layers button{padding-inline:6px;font-size:9px}.tn-gesture{font-size:8px;bottom:62px}.tn-city-picker{margin-inline:16px}.tn-city-picker label{gap:6px;padding-inline:8px;font-size:10px}.tn-city-card,.tn-status,.tn-sources{padding-inline:16px}.tn-customer-mount{margin-inline:12px}}
@media(max-width:599px){.tn-dialog{inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.tn-is-expanded .tn-map-wrap{height:clamp(290px,43dvh,460px)}.tn-city-picker select{font-size:16px}}
@media(prefers-reduced-motion:reduce){.tn-network button{transition:none}.tn-network button:active:not(:disabled){transform:none}}
.tn-gesture{bottom:62px}
/* Customer surface inherits the native night-journey palette. The carrier
   workspace keeps its independent green theme; neither app is restyled. */
.tn-heading-aside{display:grid;justify-items:center;gap:2px;flex:none}
.tn-customer{--tn-brand:var(--gold,#f2c76d);--tn-ink:var(--ink,#f8fbf9);--tn-muted:var(--muted,#9db0b8);--tn-surface:var(--night-2,#092638);--tn-soft:#103449;--tn-line:rgba(220,242,241,.13);--tn-radius:22px;border-color:rgba(195,229,231,.17);background:linear-gradient(145deg,#0b2c3d,#082333 72%);box-shadow:none}
.tn-customer-mount .tn-network{--tn-brand:var(--gold,#f2c76d)}
.tn-customer .tn-heading{align-items:start;padding:20px 20px 10px;gap:8px}
.tn-customer .tn-kicker{font-size:9px;letter-spacing:.05em;color:var(--gold,#f2c76d);gap:5px}
.tn-customer .tn-kicker img{width:23px;height:23px;object-fit:contain}
.tn-customer .tn-heading h2{font-family:"STKaiti","KaiTi",serif;font-size:27px;line-height:1.35;font-weight:700;letter-spacing:.02em;color:#faf5e7;margin-top:8px}
.tn-customer .tn-heading p{color:#9cb7bf;font-size:10px;line-height:1.9;max-width:215px;margin-top:6px}
.tn-travel-buddy{display:block;width:68px;height:68px;object-fit:contain}
.tn-customer .tn-expand{color:#b9d7de;font-size:9px!important;padding:2px 4px;min-height:36px;border-radius:8px}
.tn-customer .tn-expand svg{width:14px;height:14px}
.tn-customer .tn-stats{margin:2px 20px 14px;gap:12px}
.tn-customer .tn-stats>div{border-color:#c3e5e31c;padding-block:8px}
.tn-customer .tn-stats strong{color:#f7d995;font-size:26px;font-weight:650}
.tn-customer .tn-stats span{color:#9cb7bf;font-size:9px}
.tn-customer .tn-mode-bar{padding-bottom:14px}
.tn-customer .tn-data-badge{color:#a3c9d0!important;font-size:9px}
.tn-customer[data-source=demo] .tn-data-badge{color:#e1c892!important}
.tn-customer .tn-source-tabs{background:#051c2b80;border:1px solid #c1e2e517;padding:2px}
.tn-customer .tn-source-tabs button{color:#84a5b4;font-size:9px;min-height:30px}
.tn-customer .tn-source-tabs button[aria-pressed=true]{background:#183f52;color:#f9ddb0;box-shadow:none}
.tn-customer .tn-map-wrap{border:1px solid #b8e3ed18;border-radius:16px;background:#061c2a}
.tn-customer .tn-map-top span{background:#061c2abf;color:#e2e6d6;border:1px solid #dae7d719}
.tn-customer .tn-zoom,.tn-customer .tn-view-controls{background:#0a2d40ed;border:1px solid #b6dce22e;color:#dae7e2}
.tn-customer .tn-zoom button+button{border-color:#c5e6e51b}
.tn-customer .tn-view-controls button{color:#d0e4e4}
.tn-customer .tn-view-controls button:hover{background:#17445a}
.tn-customer .tn-gesture{color:#acc8ce;text-shadow:0 1px 4px #071b2c}
.tn-customer .tn-layers button{color:#93b2bd;border:1px solid transparent}
.tn-customer .tn-layers .is-active{color:#ffe0a0;border-color:#e8c67b36;background:#d7b6680c}
.tn-customer .tn-city-picker label{background:#061c2a66;border:1px solid #cce8e51c;color:#a1bac4;border-radius:11px}
.tn-customer .tn-city-picker select{color:#eaf2ed;color-scheme:dark}
.tn-customer .tn-city-symbol{width:40px;height:40px;border-radius:0;background:none}
.tn-customer .tn-city-symbol img{display:block;width:40px;height:40px;object-fit:contain}
.tn-customer .tn-city-copy h3{color:#f4eddb;font-size:12px}
.tn-customer .tn-city-copy p{color:#98b5c0;font-size:9px}
.tn-customer .tn-primary{background:var(--blue,#2d9cdb);color:#fffdf4;min-height:46px;border-radius:12px;font-size:12px}
.tn-customer .tn-status{font-size:9px;color:#799eac;padding-bottom:8px}
.tn-customer .tn-sources{font-size:9px;color:#87a6b3}
.tn-customer .tn-sources summary{color:#a1bdc7}
.tn-customer .tn-sources a{color:#e2c786}
.tn-dialog:has(.tn-customer){background:#061c2a!important;box-shadow:0 20px 90px #020e1dc2}
.tn-dialog:has(.tn-customer)::backdrop{background:#020e1dd1}
.tn-customer.tn-is-expanded{background:linear-gradient(150deg,#0a2c3f,#061c2a 75%)}
.inner-screen .tn-customer-mount{margin:18px 0}
@media(max-width:359px){.tn-customer .tn-heading{padding-inline:16px}.tn-customer .tn-heading h2{font-size:24px}.tn-travel-buddy{width:56px;height:56px}.tn-customer .tn-kicker{font-size:8px}.tn-customer .tn-stats{margin-inline:16px;gap:8px}.tn-customer .tn-stats strong{font-size:24px}.tn-customer .tn-stats span{font-size:8px}}
/* The embedded customer card is a journey invitation, not a full console.
   Expanded view owns detailed layers and directory controls. */
.tn-customer:not(.tn-is-expanded) .tn-heading{padding-top:16px;padding-bottom:8px}
.tn-customer:not(.tn-is-expanded) .tn-heading h2{font-size:24px}
.tn-customer:not(.tn-is-expanded) .tn-travel-buddy{width:58px;height:58px}
.tn-customer:not(.tn-is-expanded) .tn-stats{margin-bottom:8px}
.tn-customer:not(.tn-is-expanded) .tn-stats strong{font-size:23px}
.tn-customer:not(.tn-is-expanded) .tn-mode-bar{padding-bottom:10px}
.tn-customer:not(.tn-is-expanded) .tn-map-wrap{height:255px}
.tn-customer:not(.tn-is-expanded) .tn-city-picker,.tn-customer:not(.tn-is-expanded) .tn-city-symbol,.tn-customer:not(.tn-is-expanded) .tn-city-copy,.tn-customer:not(.tn-is-expanded) .tn-sources{display:none}
.tn-customer:not(.tn-is-expanded) .tn-city-card{padding-block:12px;border-top:0}
.tn-customer:not(.tn-is-expanded) .tn-status{padding-top:0;min-height:0;padding-bottom:14px}
@media(max-width:359px){.tn-customer:not(.tn-is-expanded) .tn-heading h2{font-size:22px}.tn-customer:not(.tn-is-expanded) .tn-map-wrap{height:240px}}

/* Atlas-only motion control; does not change the system/app motion setting. */
.tn-effect-switch{position:absolute;right:12px;top:42px;z-index:4;border:1px solid #cddfcf;background:#f6faf0;color:#224d48;padding:6px 10px;border-radius:9px;font:600 11px system-ui;cursor:pointer}.tn-effect-switch[aria-pressed="false"]{opacity:.65}

/* brand-community.css */
/* Navy carrier, amber flight trail, and a warm paper album. */
.brand-paw { background:#fff!important; border-radius:11px!important; width:43px!important; height:39px!important; padding:4px!important; }
.brand-paw img { width:100%;height:100%;object-fit:contain; }
.brand-name {font-style:normal!important;letter-spacing:1px!important;font-weight:700!important;}
.pet-list {grid-template-columns:repeat(auto-fit,minmax(108px,1fr));}
.community-screen {--album-paper:#f8f3e9;--album-ink:#163f5f;}
.community-header h1 {font-size:clamp(30px,8vw,40px);letter-spacing:-1px;line-height:1.28;}
.community-header em {color:#eab665;}
.community-image-wrap img {content-visibility:auto;}
.album-count {position:absolute;right:12px;bottom:12px;border-radius:20px;background:#092b46d9;color:#fff;font-size:11px;padding:6px 10px;}
.community-source {color:#92aea9;font-size:10px;display:block;margin-top:8px;}
.story-screen {max-width:760px;margin:auto;padding:12px 18px 34px;animation:story-enter .35s ease-out;}
.is-story .status-bar {display:none;}.is-story .app-header {top:0;height:56px;background:#0b2635;border-bottom:1px solid #ffffff0c;font-size:12px;}.is-story .screen {padding-top:56px;scroll-padding-top:65px;}.story-top .story-back {display:none;}.story-top {justify-content:flex-end;min-height:28px;}.is-story .app-header>span{margin-right:auto;margin-left:12px;}
.story-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px;}
.story-back {display:flex;align-items:center;gap:8px;background:none;border:0;color:#e5ded0;min-height:44px;}
.story-back svg {width:19px;}
.story-source {font-size:10px;color:#abc0bf;}
.story-gallery {position:relative;margin:0 -18px;background:#102b39;}
.story-slides {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;}
.story-slides figure {margin:0;flex:0 0 100%;scroll-snap-align:center;position:relative;}
.story-slides img {display:block;width:100%;height:clamp(270px,58svh,510px);object-fit:contain;background:#112735;}
.story-slides figcaption {position:absolute;bottom:12px;right:16px;background:#061c2ace;color:white;border-radius:30px;padding:6px 12px;font-size:11px;}
.story-gallery-nav {display:flex;justify-content:center;gap:14px;padding:10px;color:#c9d8d2;font-size:11px;align-items:center;}
.story-gallery-nav button {width:44px;height:36px;border:1px solid #ffffff20;background:#ffffff09;color:inherit;border-radius:10px;}
.story-gallery-nav svg {width:18px;}
.story-byline {display:flex;align-items:center;gap:11px;margin-top:24px;font-size:12px;}
.story-byline img {width:36px;height:36px;border-radius:10px;object-fit:contain;background:#fff;padding:3px;}
.story-byline small {display:block;color:#91aab0;font-size:10px;margin-top:4px;}
.story-screen h1 {font-size:25px;line-height:1.4;color:#f6f0e2;letter-spacing:-.4px;margin:19px 0 14px;}
.story-body {font-size:14px;line-height:1.9;white-space:pre-line;color:#b9cdd0;}
.story-actions {display:flex;align-items:center;justify-content:space-between;margin:20px 0 28px;gap:10px;}
.story-like {display:flex;align-items:center;gap:9px;min-height:44px;background:#fff9ed12;border:1px solid #dbc49b30;border-radius:24px;padding:9px 18px;color:#edcf9b;}
.story-like[aria-pressed="true"] {background:#edcf9b;color:#173549;}.story-like svg {width:18px;}
.story-actions>span {color:#8ea9b4;font-size:11px;}
.story-comments {border-top:1px solid #ffffff16;padding-top:22px;}
.story-comments h2 {font-size:18px;color:#f4eada;margin:0 0 20px;}
.story-comment {padding:16px 0;border-bottom:1px solid #ffffff0c;}
.story-comment header {display:flex;gap:8px;align-items:center;font-size:12px;color:#dfddd4;}
.story-comment header small {font-size:10px;color:#e7c48c;background:#e7c48c15;border-radius:6px;padding:2px 5px;}
.story-comment time {margin-left:auto;font-size:10px;color:#87a2ae;}
.story-comment p {font-size:13px;line-height:1.8;color:#aec5cc;margin:9px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;}
.comment-empty {font-size:13px;color:#92aeb6;line-height:1.8;padding:5px 0 18px;}
.story-comment-form {margin-top:20px;}
.story-comment-form label {font-size:12px;color:#e3d7bf;display:block;margin-bottom:10px;}
.story-comment-form textarea {width:100%;box-sizing:border-box;resize:vertical;min-height:95px;max-height:240px;border:1px solid #ffffff20;background:#102d3c;color:#f3eddf;border-radius:14px;padding:14px;font:inherit;font-size:16px;}
.story-comment-form>div {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;}
.story-comment-form small {font-size:10px;color:#8ca5ae;line-height:1.6;}
.story-comment-form button {flex-shrink:0;min-height:44px;border:0;border-radius:12px;background:#eac18a;color:#213e50;font-weight:600;padding:10px 17px;}
.story-comment-form button:disabled {opacity:.6;}
@keyframes story-enter {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:359px){.story-screen{padding-inline:14px}.story-gallery{margin-inline:-14px}.story-screen h1{font-size:22px}.story-source{font-size:9px}.story-actions>span{max-width:110px;line-height:1.6}.community-screen{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){.story-screen{animation:none}.story-slides{scroll-behavior:auto}}

/* Warm pet travel stickers, with booking kept as the one main action. */
.home-scrolled .app-header {background:#0c2432;box-shadow:0 8px 15px #061c2a26;}
.home-scrolled .status-bar {background:#0c2432;}
.home-screen .home-hero {display:flex;flex-direction:column;gap:110px;padding:128px 14px 98px;min-height:max(740px,calc(100svh - 40px));}
.home-screen .home-copy {margin-left:10px;}
.home-dock.pet-service-dock {position:relative;inset:auto;margin-top:auto;padding:18px 14px 14px;border-radius:28px;background:rgba(8,37,51,.95);border-color:#b7d8d926;box-shadow:0 16px 32px #02131c36;}
.pet-service-dock::before {display:none;}
.pet-dock-heading {display:flex;justify-content:space-between;align-items:center;padding:0 4px;margin-bottom:16px;}
.pet-dock-heading span {font-size:10px;color:#bbcecd;}
.pet-dock-heading h2 {margin:6px 0 0;font-size:19px;font-weight:700;letter-spacing:.3px;color:var(--paper);}
.pet-dock-heading .pet-dock-paw {display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:#ffdfa514;color:var(--gold-bright);transform:rotate(12deg);}
.pet-dock-paw svg {width:24px;height:24px;}
.pet-home-services {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.pet-home-service {min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 0 8px;background:transparent;border-radius:20px;transition:transform .18s var(--ease);}
.pet-home-service:active {transform:scale(.96);}
.pet-service-art {width:100%;max-width:88px;aspect-ratio:1;display:block;}
.pet-service-art img {display:block;width:100%;height:100%;filter:drop-shadow(0 5px 4px #031e2833);transition:transform .25s var(--ease);animation:pet-sticker-in .55s var(--ease) both;}
.pet-home-service:nth-child(2) img {animation-delay:60ms;}.pet-home-service:nth-child(3) img {animation-delay:120ms;}.pet-home-service:nth-child(4) img {animation-delay:180ms;}
.pet-home-service:hover img {transform:translateY(-4px) rotate(-3deg);}
.pet-home-service strong {display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--paper);white-space:nowrap;}
.pet-home-service small {margin-top:5px;color:#a9c1c1;font-size:10px;white-space:nowrap;}
.pet-service-dock .pet-booking-cta {min-height:62px;justify-content:flex-start;padding:10px 15px;gap:12px;border-radius:18px;margin-top:14px;box-shadow:0 5px 13px #e8b55e16;}
.pet-booking-cta .booking-paw {width:36px;height:36px;display:grid;place-items:center;border-radius:13px;background:#fff6d663;transform:rotate(-9deg);}
.pet-booking-cta .booking-paw svg {width:25px;height:25px;margin:0;}
.pet-booking-cta .booking-cta-copy {text-align:left;flex:1;}
.booking-cta-copy strong {display:block;font-size:17px;font-weight:750;}
.booking-cta-copy small {display:block;font-size:10px;font-weight:400;opacity:.8;margin-top:4px;}
.pet-booking-cta>svg {width:22px;height:22px;}
.community-pet-avatar {width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.community-pet-avatar>svg {width:100%;height:100%;}.community-pet-avatar.generic {background:#153f50;border-radius:14px;color:var(--gold);}.community-pet-avatar.generic>svg {width:20px;height:20px;}
.community-author strong {font-size:12px;}.community-author small {font-size:9px;line-height:1.5;}
.story-byline .community-pet-avatar {width:44px;height:44px;}
.community-meta .example-meta-label {font-size:9px;color:#d2bea0;background:#c5aa7b12;border-radius:5px;padding:3px 5px;}
.community-examples {padding:18px 14px 5px;margin:14px 0 24px;border-radius:20px;background:#102d3a;border:1px solid #ffffff09;}
.example-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;}.example-heading strong {font-size:15px;color:#f3e8d4;}.example-heading>span {font-size:10px;color:#ddc59b;border:1px solid #ddc59b38;border-radius:20px;padding:4px 8px;}
.example-caption {font-size:10px;line-height:1.6;color:#b2c6c8;margin:9px 0 15px;}
.example-like-summary {display:flex;align-items:center;gap:7px;padding-bottom:14px;border-bottom:1px solid #ffffff0c;color:#dbbe99;}
.example-like-summary>svg {width:17px;height:17px;}.example-like-summary>span {font-size:11px;}.example-like-summary strong {font-size:18px;}
.example-like-summary .example-mini-pets {margin-left:auto;display:flex;padding-left:7px;}.example-mini-pets .community-pet-avatar {width:24px;height:24px;margin-left:-6px;border:2px solid #102d3a;border-radius:12px;overflow:hidden;}
.example-comment {display:flex;gap:10px;padding:16px 0;border-bottom:1px solid #ffffff09;}.example-comment:last-child{border:0;}.example-comment .community-pet-avatar {width:32px;height:32px;}.example-comment>div {flex:1;min-width:0;}
.example-comment strong {font-size:11px;color:#e3d9ca;}.example-comment p {margin:6px 0 0;font-size:12px;line-height:1.8;color:#b5cbd0;}.example-comment-like {display:flex;flex-direction:column;align-items:center;gap:4px;color:#a3b9bb;}.example-comment-like svg {width:14px;height:14px;}.example-comment-like small {font-size:10px;}
@keyframes pet-sticker-in {from{opacity:0;transform:translateY(10px) rotate(-5deg) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:359px){.pet-home-services{gap:5px}.home-dock.pet-service-dock{padding-inline:10px}.pet-home-service strong{font-size:12px}.pet-home-service small{font-size:9px}.pet-dock-heading h2{font-size:18px}.home-screen .home-hero{gap:95px}.pet-booking-cta .booking-paw{width:32px;height:32px}.example-comment{gap:8px}}
@media(prefers-reduced-motion:reduce){.pet-service-art img{animation:none;transition:none}.pet-home-service:hover img{transform:none}.pet-home-service{transition:none}}

.story-comment p{white-space:pre-wrap;overflow-wrap:anywhere}.story-replies{margin-top:12px;border-left:2px solid var(--community-border,rgba(41,68,62,.12));padding-left:16px}.story-comment-reply{background:rgba(50,80,65,.025);padding:12px;border-radius:12px}.story-comment-reply .story-comment-reply{padding-left:0}.story-comment header .usage-verified{color:#315b47;background:#e8f0e8}.comment-reply-button{min-width:44px;min-height:44px;padding:8px 12px;background:transparent;border:0;color:var(--community-muted,#60756d);font:inherit;font-size:13px;cursor:pointer}.comment-reply-button:focus-visible{outline:2px solid #547668;outline-offset:2px}#storyReplyContext{display:flex;justify-content:space-between;align-items:center;background:#f2f3ec;padding:8px 12px;border-radius:8px}#storyReplyContext[hidden]{display:none}#storyReplyContext button{border:0;background:transparent;min-height:44px;color:#426055}#storyUsageLabel{display:grid;gap:8px;font-size:13px;margin:12px 0}#storyUsageLabel[hidden]{display:none}#storyUsageOrder{width:100%;padding:12px;border:1px solid rgba(41,68,62,.15);border-radius:8px;background:#f5f5ee;color:#29443e}.reply-to-author{font-size:12px;color:#687e72}

#storyReplyContext{color:#29443e}#storyReplyContext span{color:#29443e}.route-shell{min-height:100px}

/* assets/ui/pet-ui.css */
/* Extend the existing pet stickers without changing the page palette or layout. */
.pet-art { display: inline-block; width: 1.7em; height: 1.7em; max-width: none; object-fit: contain; vertical-align: middle; flex: 0 0 auto; user-select: none; }
.bottom-nav { height: calc(80px + env(safe-area-inset-bottom)); padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
.bottom-nav .nav-button { min-width: 0; min-height: 44px; }
.app-header { top: env(safe-area-inset-top, 0px); }
.home-hero { padding-top: calc(96px + env(safe-area-inset-top)); }
.inner-screen { padding-top: calc(84px + env(safe-area-inset-top)); }
.tracking-hero { padding-top: calc(86px + env(safe-area-inset-top)); }
.profile-cover { padding-top: calc(91px + env(safe-area-inset-top)); }
.community-screen { padding-top: calc(83px + env(safe-area-inset-top)); }
.header-button .pet-art { width: 31px; height: 31px; }
.header-button.guide { gap: 5px; padding: 0 7px 0 4px; }
.header-button.guide .pet-art { width: 29px; height: 29px; }
.header-button, .back-button, .is-route .app-header .header-button, .is-route .app-header .back-button { min-width: 44px; min-height: 44px; }
.transport-card .transport-icon { width: 52px; height: 52px; background: transparent; }
.transport-icon .pet-art { width: 52px; height: 52px; }
.transport-card { gap: 10px; }
.transport-copy small { line-height: 1.5; }
.transport-card:active { transform: scale(.985); }
.profile-avatar .pet-art { width: 100%; height: 100%; }
.pet-mini-face .pet-art { width: 44px; height: 44px; }
.quick-link > span .pet-art, .profile-admin-icon .pet-art { width: 36px; height: 36px; }
.booking-paw .pet-art { width: 36px; height: 36px; }
.journey-stamp .pet-art { width: 38px; height: 38px; }
.section-line-icon .pet-art { width: 40px; height: 40px; }
.mode-illustration { flex: 0 0 46px; width: 46px; height: 46px; }
.mode-illustration .pet-art { width: 46px; height: 46px; }
.route-planner .quote-mode-card { gap: 10px; min-height: 90px; padding: 12px 10px; }
.mode-copy { min-width: 0; }
.mode-copy small { line-height: 1.5; }
.planner-services .pet-art { width: 34px; height: 34px; }
.care-options { margin-top: 20px; border-block: 1px solid #dce2d8; }
.care-options > summary { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 9px 0; cursor: pointer; list-style: none; }
.care-options > summary::-webkit-details-marker { display: none; }
.care-options > summary > .pet-art { width: 38px; height: 38px; }
.care-options > summary > span { flex: 1; min-width: 0; }
.care-options strong { display: block; font-size: 14px; font-weight: 600; color: #365c54; }
.care-options summary small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: #64796e; }
.care-options summary > svg { width: 18px; height: 18px; color: #64796e; transition: transform .18s ease; }
.care-options[open] summary > svg { transform: rotate(180deg); }
.care-options summary:focus-visible { outline: 2px solid #507f72; outline-offset: 3px; }
.care-options .planner-services label:last-child { border-bottom: 0; }
.route-planner .city-directory > summary { display: none; }
.route-planner .journey-date { margin: 14px 0 4px; }
.route-planner .planner-map .route-map-stage { transition: none; }
.journey-movie-dot { animation: pet-soft-pulse 2.4s ease-in-out infinite; box-shadow: none; }
.planner-map:has(.pet-map[data-motion="paused"]) .journey-movie-dot { animation-play-state: paused; }
.planner-submit, .quote-summary-dock button, .text-command, .map-expand, .swap-cities { min-height: 44px; }
.quote-summary-dock button { white-space: nowrap; }
.route-planner :is(h1, h2, strong, input, button, .planner-eyebrow), .bottom-nav, .header-button { letter-spacing: 0; }
.route-planner .planner-field :is(input:not([type="checkbox"]), select), #citySearch, #cityProvince { font-size: 16px; }
@keyframes pet-nav-pop { 0% { transform: scale(.9); } 65% { transform: translateY(-3px) scale(1.05); } 100% { transform: none; } }
@keyframes pet-soft-pulse { 50% { opacity: .45; } }
@media (hover: hover) and (pointer: fine) {
  .nav-button:hover .pet-art { transform: translateY(-2px); }
}
@media (hover: none) {
  .transport-card:hover { transform: none; }
}
@media (max-width: 400px) {
  .transport-card { gap: 8px; padding-inline: 10px; }
  .transport-card .transport-icon, .transport-icon .pet-art { width: 46px; height: 46px; }
  .transport-copy strong { font-size: 14px; }
  .transport-arrow { display: none; }
  .route-planner .quote-mode-card { gap: 7px; }
  .mode-illustration { flex-basis: 38px; width: 38px; height: 38px; }
  .mode-illustration .pet-art { width: 38px; height: 38px; }
  .quote-summary-dock { gap: 8px; }
  .quote-summary-dock button { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav .pet-art, .journey-movie-dot { animation: none; transition: none; }
  .screen { scroll-behavior: auto; }
}

/* assets/network/booking-first.css */
/* Booking actions lead. The globe is a supporting, opt-in exploration. */
.home-screen .home-hero{min-height:0;gap:18px;padding:calc(82px + env(safe-area-inset-top)) 12px 14px;background-position:59% 46%}
.home-screen .home-copy{margin-left:6px;max-width:255px}
.home-screen .home-eyebrow{font-size:10px;margin-bottom:8px}
.home-screen .home-title{font-size:clamp(32px,10vw,40px);line-height:1.06}
.home-screen .home-desc{margin-top:10px;font-size:11px;line-height:1.6}
.home-screen .assurance-chip{top:92px;right:15px;width:82px;font-size:9px;padding:7px}
.home-screen .home-hero:before{top:92px;width:86px;height:86px;border-width:12px;right:-20px}
.home-screen .home-hero:after{top:162px;right:48px}
.home-screen .home-dock.pet-service-dock{margin-top:0;padding:12px;border-radius:20px}
.home-screen .pet-dock-heading{margin-bottom:8px;padding:0 2px}
.home-screen .pet-dock-heading h2{font-size:16px;margin-top:3px}
.home-screen .pet-dock-heading span{font-size:9px}
.home-screen .pet-dock-heading .pet-dock-paw{width:32px;height:32px;border-radius:10px}
.home-screen .pet-home-services{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.home-screen .pet-home-service{min-height:83px;padding-bottom:3px;min-width:0}
.home-screen .pet-service-art{max-width:49px;max-height:49px}
.home-screen .pet-home-service strong{font-size:11px;margin-top:5px}
.home-screen .pet-home-service small{font-size:8px;margin-top:3px;letter-spacing:0}
.home-screen .pet-service-dock .pet-booking-cta{min-height:54px;margin-top:10px;padding:8px 12px;border-radius:13px}
.home-screen .booking-cta-copy strong{font-size:16px}
.home-screen .booking-cta-copy small{font-size:9px}
.home-screen .tn-customer-mount{margin:8px 12px 16px}
.shipping-selection .screen-header{margin-bottom:14px}
.shipping-selection .screen-header h1{font-size:24px;line-height:1.25;margin-top:6px}
.shipping-selection .screen-header p{font-size:11px;margin-top:6px}
.shipping-selection .transport-list{gap:8px}
.shipping-selection .transport-card{min-height:66px;padding:9px 10px;gap:9px}
.shipping-selection .transport-icon,.shipping-selection .transport-icon .pet-art{width:44px;height:44px}
.shipping-selection .transport-copy strong{font-size:14px}
.shipping-selection .transport-copy small{font-size:10px}
.shipping-selection .transport-price b{font-size:15px}
.shipping-selection .transport-price small{font-size:8px}
.shipping-selection .transport-visual{min-height:92px;margin:16px 0;padding:14px;border-radius:14px}
.shipping-selection .transport-visual h2{font-size:18px}
.shipping-selection .transport-visual p{font-size:10px;margin-top:5px}
.shipping-selection .visual-kicker{font-size:8px;margin-bottom:5px}
.shipping-selection .visual-orbit{right:18px;bottom:16px;font-size:26px}
.shipping-selection .tn-customer-mount{margin:16px 0}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-heading{padding:12px 12px 6px;align-items:center}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-heading h2{font-family:inherit;font-size:15px;line-height:1.4;margin-top:3px;letter-spacing:0}
.tn-customer.tn-booking-map .tn-expand{min-height:44px;padding:7px}
.tn-customer.tn-booking-map .tn-kicker{font-size:8px}
.tn-transports{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 12px 6px}
.tn-transports button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 3px;min-height:55px;border:1px solid transparent;border-radius:9px;color:#a9c6d0;font-size:10px}
.tn-transports button[aria-pressed=true]{background:#f2c76d13;border-color:#f2c76d55;color:#ffe1a2}
.tn-transports button:hover{background:#e5eee912}
.tn-transports img{width:28px;height:28px;object-fit:contain}
.tn-transport-caption{color:#b4ccd3;font-size:9px;padding:0 14px 7px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-map-wrap{height:156px;margin:0 10px;border-radius:12px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-map-top{inset:7px 7px auto}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-map-top span{font-size:8px;padding:3px 6px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-zoom{display:none}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-view-controls{bottom:7px;right:7px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-view-controls button{min-height:32px;font-size:8px;padding:4px 6px;min-width:29px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-view-controls [data-tn=replay],.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-view-controls [data-tn=retry]{display:none}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-gesture{font-size:8px;bottom:12px;left:8px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-stats{margin:8px 12px 2px;gap:4px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-stats>div{padding:1px 3px;display:flex;align-items:baseline;gap:5px;border:0}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-stats strong{font-size:15px;line-height:1.3}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-stats span{font-size:8px;margin:0;line-height:1.4}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-city-card{padding:8px 12px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-primary{min-height:40px;font-size:11px;border-radius:10px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-mode-bar{padding:0 12px 9px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-source-tabs,.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-status,.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-layers{display:none}
.tn-customer.tn-booking-map.tn-is-expanded .tn-heading h2{font-family:inherit;font-size:20px;letter-spacing:0}
.tn-customer.tn-booking-map.tn-is-expanded .tn-map-wrap{height:clamp(200px,32dvh,350px)}
.tn-customer.tn-booking-map.tn-is-expanded .tn-transports{margin-inline:20px;margin-bottom:10px}
.tn-customer.tn-booking-map.tn-is-expanded .tn-transports button{min-height:62px;font-size:12px}
.tn-customer.tn-booking-map.tn-is-expanded .tn-transports img{width:32px;height:32px}
.tn-customer.tn-booking-map.tn-is-expanded .tn-transport-caption{padding-inline:20px;font-size:11px}
@media(max-width:359px){.home-screen .home-title{font-size:32px}.home-screen .home-hero{gap:14px;padding-inline:10px}.home-screen .home-dock.pet-service-dock{padding-inline:10px}.home-screen .pet-home-service strong{font-size:10px}.home-screen .pet-home-service small{font-size:7px}.home-screen .pet-service-art{max-width:44px;max-height:44px}.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-map-wrap{height:145px}.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-stats span{font-size:7px}}
@media(max-height:620px){.home-screen .home-hero{gap:12px;padding-top:calc(78px + env(safe-area-inset-top))}.home-screen .home-eyebrow{margin-bottom:5px}.home-screen .home-title{font-size:30px}.home-screen .home-desc{font-size:10px;margin-top:7px}.home-screen .pet-dock-heading>div>span{display:none}.home-screen .home-dock.pet-service-dock{padding-block:10px}.home-screen .pet-home-service{min-height:76px}.home-screen .pet-booking-cta .booking-cta-copy small{margin-top:2px}}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-heading{padding-block:5px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-kicker{display:none}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-transports button{min-height:46px;padding-block:3px;font-size:9px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-transports img{width:24px;height:24px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-transport-caption{display:none}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-map-wrap{height:120px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-city-card{padding-block:4px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-primary{min-height:40px}
.route-planner .planner-modes .quote-mode-card[data-mode=custom]{grid-column:1/-1}
@media(max-height:620px){.shipping-selection .screen-header p{display:none}.shipping-selection .transport-list{gap:6px}.shipping-selection .transport-card{min-height:58px;padding-block:6px}}
/* Keep the original cat and dog faces above the lowered booking dock.
   Bound the photo independently of the dock height so it does not grow into it. */
.home-screen .home-hero{gap:180px;background-size:100% 100%,100% auto;background-position:center center,center 82px;background-repeat:no-repeat}
.tn-transports button small{font-size:9px;line-height:1.25;font-variant-numeric:tabular-nums;color:#a9c6d0}
.tn-transports button[aria-pressed=true] small{color:#f4d692}
.tn-customer.tn-booking-map .tn-data-info{font-size:9px;line-height:1.3;color:#b4cbd4;min-height:32px;padding:4px 6px;text-decoration:underline;text-underline-offset:3px}
.tn-customer.tn-booking-map .tn-mode-bar{align-items:center}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-mode-bar{padding-bottom:5px}
.tn-customer.tn-booking-map .tn-data-badge{font-size:8px}
.tn-customer.tn-booking-map .tn-sources.tn-info-open{display:block;padding:8px 14px 14px;background:#03172455}
.tn-customer.tn-booking-map .tn-sources.tn-info-open summary{color:#e2cf9e;min-height:32px}
.tn-customer.tn-booking-map:not(.tn-is-expanded) .tn-transports button{min-height:57px}
@media(max-height:620px){.home-screen .home-hero{gap:142px;background-position:center center,center 36px}.home-screen .home-title{font-size:28px}.home-screen .home-desc{font-size:9px;line-height:1.4;margin-top:5px}.home-screen .home-eyebrow{font-size:9px}.home-screen .pet-dock-heading{margin-bottom:5px}.home-screen .pet-dock-heading .pet-dock-paw{width:26px;height:26px}.home-screen .pet-service-art{max-width:39px;max-height:39px}.home-screen .pet-home-service{min-height:66px}.home-screen .pet-service-dock .pet-booking-cta{min-height:46px;margin-top:8px;padding-block:5px}.home-screen .pet-booking-cta .booking-paw{width:28px;height:28px}.home-screen .pet-booking-cta .booking-paw .pet-art{width:28px;height:28px}.home-screen .booking-cta-copy strong{font-size:15px}.home-screen .booking-cta-copy small{font-size:8px}}
/* Separate photo breathing room without reviving the giant 740px hero. */
.home-screen .home-hero{gap:188px}
@media(max-height:620px){.home-screen .home-hero{gap:142px}}

.tn-booking-map .tn-route-selector{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px;align-items:center;padding:12px;background:rgba(70,90,67,.035);border-radius:12px}.tn-route-selector label{display:grid;gap:6px;min-width:0;font-size:12px;font-weight:600;color:#375247}.tn-route-selector select{width:100%;min-width:0;min-height:44px;font:inherit;font-size:14px;color:#29443e;background:#f6f7ed;border:1px solid rgba(42,67,51,.1);border-radius:8px;padding:8px}.tn-route-selector select:focus-visible{outline:2px solid #69806a;outline-offset:2px}.tn-route-selector>span{color:#71856e;text-align:center}.tn-booking-map .tn-transport-caption{overflow-wrap:anywhere}
.tn-network.tn-customer .tn-route-selector label{color:#adc7b9}.tn-network.tn-customer .tn-route-selector>span{color:#c4d9ca}.tn-network.tn-customer .tn-route-selector select{color:#28473e;background:#f2f4e9}

/* assets/vendor/leaflet.css */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url("/assets/vendor/images/layers.png");
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url("/assets/vendor/images/layers-2x.png");
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url("/assets/vendor/images/marker-icon.png");
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* route-planner.css */
/* Route workspace: real geography, readable fields, restrained transport accents. */
.app-shell:has(.is-route) { padding: 0; min-height: 100dvh; background: #f1f5f2; }
.app-frame.is-route { width: 100%; border-radius: 0; min-height: 0; height: var(--route-viewport-height, 100dvh); background: #f1f5f2; box-shadow: none; isolation: isolate; }
.is-route .status-bar { display: none; }
.is-route .app-header { top: 0; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, calc((100% - 1040px) / 2)) 0; background: #173c36; z-index: 1000; }
.is-route .app-header .header-button, .is-route .app-header .back-button { min-width: 44px; height: 40px; border-radius: 12px; }
.is-route .app-header .guide { font-size: 12px; }
.is-route .screen { padding-top: calc(52px + env(safe-area-inset-top)); background: #f1f5f2; scrollbar-width: none; scroll-padding: 68px 0 100px; }
.is-route .bottom-nav { display: none; }
.route-planner { --route-ink: #203a36; --route-muted: #667772; --route-line: #e5ebe6; --planner-gutter: clamp(12px, 3.6vw, 24px); color: var(--route-ink); font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; font-size: 14px; line-height: 1.5; width: 100%; max-width: 640px; margin: auto; padding: 0 var(--planner-gutter) calc(96px + env(safe-area-inset-bottom)); }
.route-planner *, .route-planner { letter-spacing: 0; }
.route-planner button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.route-planner button, .route-planner input, .route-planner select { transition: background-color .15s, border-color .15s; }
.route-planner button:focus-visible, .route-planner input:focus-visible, .route-planner select:focus-visible { outline: 2px solid #178574; outline-offset: 3px; }
.planner-heading { padding: 12px 2px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.planner-eyebrow { color: #6c7c76; font-size: 11px; }
.planner-heading h1 { margin: 2px 0 0; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.3; font-weight: 650; }
.city-coverage { display: inline-flex; align-items: center; gap: 5px; color: #526d61; font-size: 11px; white-space: nowrap; }
.city-coverage svg { width: 15px; height: 15px; }
.planner-map { border: 1px solid #dce7df; border-radius: 18px; overflow: hidden; background: #fff; }
.map-heading { padding: 8px 16px; display: flex; justify-content: space-between; gap: 8px; align-items: center; background: #fff; }
.map-heading > div { display: flex; gap: 9px; align-items: center; min-width: 0; }
.map-heading strong { font-size: 14px; overflow-wrap: anywhere; }
.map-heading strong span { color: #8a9690; margin: 0 8px; font-weight: 400; }
.map-heading > span { color: #64766d; font-size: 11px; max-width: 43%; text-align: right; }
.route-dot { height: 8px; width: 8px; border-radius: 50%; background: #157f70; flex-shrink: 0; }
.route-map-stage { position: relative; height: clamp(180px, min(55vw, 27svh), 264px); isolation: isolate; overflow: hidden; background: #deedf0; }
.china-geographic-map { height: 100%; width: 100%; background: #deedf0; }
.route-map-stage .leaflet-container { font-family: inherit; background: #deedf0; }
.map-loading { position: absolute; inset: 0; z-index: 800; background: #e7eff0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #3d5f56; font-size: 14px; }
.map-loading button { padding: 10px 20px; background: #176d60; color: white; border-radius: 5px; }
.map-controls { position: absolute; z-index: 800; right: 8px; top: 8px; display: grid; gap: 2px; border: 1px solid #d2dfd8; background: white; border-radius: 12px; box-shadow: 0 2px 7px #274d3912; overflow: hidden; }
.map-controls button { width: 42px; height: 42px; display: grid; place-items: center; color: #35594b; background: white; }
.map-controls button:hover { background: #e7f1eb; }
.map-controls svg { width: 19px; height: 19px; }
.map-view-controls { position: absolute; z-index: 800; left: 8px; bottom: 21px; display: flex; padding: 2px; border: 1px solid #d2dfd8; border-radius: 12px; background: #fff; box-shadow: 0 2px 7px #274d3912; }
.map-view-controls button { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 60px; min-height: 40px; padding: 0 8px; background: none; color: #35594b; font-size: 12px; }
.map-view-controls button + button { border-left: 1px solid #e5ece7; }
.map-view-controls svg { width: 15px; height: 15px; }
.map-city-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #4c6356; font-weight: 500; text-shadow: 0 1px 2px white, 1px 0 white, -1px 0 white; white-space: nowrap; border: 0; background: transparent; }
.map-city-label:focus-visible { outline: 2px solid #167e6e; }
.map-city-dot { width: 4px; height: 4px; border: 1px solid #72947f; border-radius: 50%; background: white; flex-shrink: 0; }
.map-city-label:hover { color: #075e4b; font-weight: 700; }
.route-endpoint.leaflet-tooltip { background: #fff; border: 1px solid #cfdbd3; box-shadow: 0 2px 5px #173d3020; font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 4px; color: #186553; }
.route-endpoint.endpoint-1 { color: #9d562b; }
.map-transport-marker > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #d4b286; box-shadow: 0 2px 8px #70481528; color: #8c5c20; }
.map-transport-marker svg { width: 18px; height: 18px; }
.province-tooltip { font-size: 12px; color: #284d3e; }
.south-sea-inset { position: absolute; z-index: 600; right: 8px; bottom: 23px; width: 51px; height: 69px; border: 1px solid #b6cac5; border-radius: 2px; background: #deedf0; pointer-events: none; }
.south-sea-map { width: 100%; height: 49px; }
.south-sea-inset > span { display: block; text-align: center; color: #516d62; font-size: 10px; height: 18px; }
.map-source { position: absolute; z-index: 600; bottom: 0; right: 0; padding: 3px 7px; background: #ffffffcc; color: #677c72; font-size: 10px; }
.map-source a { color: inherit; }
.map-plan-label { position: absolute; z-index: 600; left: 0; top: 0; color: #607770; font-size: 10px; background: #ffffffc9; padding: 3px 6px; border-radius: 0 0 3px 0; pointer-events: none; }
.map-bottom { display: flex; align-items: center; gap: 12px; padding: 7px 16px; background: white; color: #6b7c74; font-size: 11px; }
.map-bottom > span { display: inline-flex; align-items: center; gap: 6px; }
.map-bottom > span:last-child { margin-left: auto; }
.map-bottom i { width: 7px; height: 7px; border-radius: 50%; }
.legend-origin { background: #147f72; } .legend-destination { background: #cf723e; }
.planner-layout { display: block; padding: 0; min-width: 0; }
.planner-fields { min-width: 0; }
.planner-section { padding: clamp(12px, 3.5vw, 20px); margin-top: 12px; border: 1px solid var(--route-line); border-radius: 18px; background: #fff; }
.planner-section:last-child { border-bottom: 1px solid var(--route-line); }
.planner-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.planner-section-head h2 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.planner-section-head h2 > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; color: #457862; background: #edf4ee; font-variant-numeric: tabular-nums; font-weight: 600; }
.text-command { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; min-height: 36px; background: none; color: #237967; font-size: 13px; white-space: nowrap; }
.text-command svg { width: 16px; height: 16px; }
.city-input-row { display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 8px; align-items: end; }
.planner-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.planner-field > span { font-size: 12px; color: #61766a; }
.planner-field input, .planner-field select, .city-filters input, .city-filters select { min-width: 0; width: 100%; max-width: 100%; border: 1px solid #dce6df; border-radius: 10px; background: #f8faf8; color: #263f33; padding: 9px 10px; height: 44px; font-size: 16px; outline-offset: 2px; }
.planner-field input:focus, .planner-field select:focus { background: #fff; border-color: #81a897; }
.planner-field input::placeholder { color: #8a988f; font-size: 13px; }
.origin-field input, .destination-field input { font-weight: 600; }
.origin-field > span::before, .destination-field > span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #238470; }
.destination-field > span::before { background: #cd8d53; }
.swap-cities { background: #eef4ef; width: 44px; height: 44px; border-radius: 50%; color: #557964; display: grid; place-items: center; }
.swap-cities:hover { background: #e0e9e1; }
.swap-cities svg { width: 19px; height: 19px; }
.city-directory { margin-top: 6px; border-bottom: 1px solid var(--route-line); }
.city-directory > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 0; color: #4f6b5b; font-size: 13px; }
.city-directory > summary::-webkit-details-marker { display: none; }
.city-directory > summary span { color: #87988b; margin-left: auto; font-size: 12px; }
.city-directory > summary svg { width: 15px; height: 15px; }
.city-side { display: flex; border-bottom: 1px solid #dce5dd; gap: 20px; margin-bottom: 12px; }
.city-side button { background: transparent; padding: 10px 0; min-height: 42px; color: #748275; border-bottom: 2px solid transparent; font-size: 13px; }
.city-side .active { border-color: #18806b; color: #146852; }
.city-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.city-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; max-height: 240px; overflow: auto; margin-top: 9px; }
.city-results button { min-height: 40px; background: none; font-size: 13px; color: #385644; padding: 6px 4px; overflow-wrap: anywhere; border-radius: 4px; }
.city-results button:hover, .city-results button:focus-visible { background: #e6eee5; }
.address-fields { display: grid; gap: 10px; margin-top: 12px; }
.field-hint { color: #79897d; font-size: 12px; line-height: 1.7; margin: 9px 0 0; }
.city-directory .field-hint { padding-bottom: 12px; }
.planner-two-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-top: 12px; }
.planner-pets { display: flex; overflow: auto; gap: 8px; padding: 2px 0 6px; }
.route-planner .quote-pet-card { min-width: 132px; display: flex; gap: 8px; align-items: center; padding: 9px 10px; min-height: 58px; border: 1px solid #d8e2d8; border-radius: 12px; background: white; color: #365341; position: relative; flex: 0 0 auto; }
.route-planner .quote-pet-card.active { background: #edf4ec; border-color: #78a78b; box-shadow: none; }
.route-planner .quote-pet-card > svg { width: 23px; height: 23px; color: #6a9274; }
.route-planner .quote-pet-card strong { display: block; font-size: 14px; color: #365341; }
.route-planner .quote-pet-card small { display: block; font-size: 11px; color: #798576; margin-top: 4px; }
.route-planner .quote-pet-card > b, .route-planner .quote-mode-card > b { display: none; }
.planner-modes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.route-planner .quote-mode-card { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 80px; padding: 8px 3px; background: #fff; border: 1px solid #dbe3d9; border-radius: 12px; color: #476247; box-shadow: none; }
.route-planner .quote-mode-card.active { background: #edf4ec; border-color: #78a78b; }
.route-planner .quote-mode-card svg { width: 21px; height: 21px; color: #557b5b; }
.route-planner .quote-mode-card.active svg { color: #24684e; }
.route-planner .quote-mode-card strong { font-size: 13px; color: #365341; }
.route-planner .quote-mode-card small { font-size: 11px; color: #7d8a78; }
.departure-field { margin-top: 12px; }
.planner-services { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.planner-services label { display: flex; align-items: center; gap: 5px; font-size: 13px; min-height: 36px; }
.planner-services input { width: 17px; height: 17px; accent-color: #207b62; margin: 0; }
.planner-price { position: static; padding: clamp(12px, 3.5vw, 20px); margin-top: 12px; border: 1px solid var(--route-line); border-radius: 18px; background: #fff; min-width: 0; scroll-margin-top: 72px; }
.price-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.price-title > span { font-size: 11px; color: #6b8d70; }
.price-amount { min-height: 75px; padding: 8px 0 10px; }
.price-amount > small { font-size: 11px; color: #8c9685; display: block; }
.price-amount > strong { display: block; font-size: 30px; line-height: 1.4; color: #214737; font-weight: 650; font-variant-numeric: tabular-nums; }
.price-amount > strong > span { font-size: 20px; padding-right: 5px; }
.price-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--route-line); border-bottom: 1px solid var(--route-line); font-size: 13px; }
.price-route svg { width: 16px; height: 16px; }
.price-route > span { color: #7f8c76; font-size: 11px; margin-left: auto; }
.price-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 14px 0 8px; cursor: pointer; }
.price-details > summary::-webkit-details-marker { display: none; }
.price-details summary svg { width: 14px; height: 14px; }
.price-details dl { margin: 3px 0 10px; }
.price-details dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12px; }
.price-details dt { color: #798572; }
.price-details dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: #495b40; }
.price-disclaimer { color: #87917f; font-size: 11px; line-height: 1.8; margin: 10px 0 18px; }
.planner-submit { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 12px 15px; color: white; background: #1f6a53; border-radius: 12px; font-size: 14px; font-weight: 600; }
.planner-submit:hover:not(:disabled) { background: #165a45; }
.planner-submit:disabled { background: #b1bdb0; cursor: not-allowed; }
.planner-submit svg { width: 17px; height: 17px; }
.price-footnote { font-size: 11px; text-align: center; color: #8b9582; margin: 10px 0; }
.quote-error-message { font-size: 13px; color: #b14e38; line-height: 1.6; }
.quote-error-message:empty { display: none; }
.quote-summary-dock { position: absolute; z-index: 1000; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e1e9e3; padding: 10px max(var(--planner-gutter), calc((100% - 992px) / 2)) max(10px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 16px; box-shadow: 0 -5px 20px #21473706; }
.quote-summary-dock > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.quote-summary-dock small { color: #698175; font-size: 11px; }
.quote-summary-dock strong { color: #245a45; font-size: 23px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; }
.quote-summary-dock button { min-height: 44px; padding: 10px 18px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 24px; background: #245e4c; color: #fff; font-size: 13px; white-space: nowrap; }
.quote-summary-dock button svg { width: 15px; height: 15px; }
.is-route:has(input:not([type="checkbox"]):focus, select:focus, textarea:focus) .quote-summary-dock { display: none; }
.map-view-controls button[aria-pressed="true"] { background: #eaf3ec; border-radius: 9px; color: #19694d; }
.modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { transition: transform .18s ease-out, opacity .18s ease-out; }
.tracking-screen .globe-wrap { height: auto; padding: 0; margin: 20px 0 20px; z-index: 1; border-radius: 8px; }
.tracking-screen .tracking-hero::after { display: none; }
.tracking-screen .tracking-copy h1 { font-size: 28px; line-height: 1.4; }
.tracking-screen .tracking-copy p { font-size: 13px; }
.tracking-screen .tracking-copy .gold-label { font-size: 11px; }
.tracking-screen .live-pill { font-size: 12px; }
.tracking-screen .progress-point strong { font-size: 13px; }
.tracking-screen .progress-point small { font-size: 11px; line-height: 1.6; }
.tracking-screen .location-card strong { font-size: 14px; }
.tracking-screen .location-card small { font-size: 12px; line-height: 1.6; }
.tracking-screen .location-card button { min-width: 44px; min-height: 40px; font-size: 12px; }
.tracking-screen .track-metrics span { font-size: 12px; }
.tracking-screen .track-metrics strong { font-size: 14px; }
.tracking-screen .route-map-stage { height: clamp(220px, 32dvh, 270px); }
.tracking-screen .tracking-hero { min-height: 0; padding-bottom: 0; }
@media (max-width: 560px) {
  .app-shell { padding: 0; min-height: 100dvh; }
  .app-frame { height: 100dvh; min-height: 0; }
  .app-frame.is-route { width: 100%; height: var(--route-viewport-height, 100dvh); border-radius: 0; box-shadow: none; }
  .modal { max-height: 90dvh; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .city-coverage svg { display: none; }
  .map-heading, .map-bottom { padding-left: 10px; padding-right: 10px; }
  .planner-modes { gap: 5px; }
  .route-planner .quote-mode-card small { font-size: 10px; }
  .planner-section-head h2 { font-size: 14px; }
  .text-command { font-size: 12px; }
}
@media (min-width: 720px) {
  .route-planner { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr); align-items: start; column-gap: clamp(16px, 2.5vw, 28px); max-width: 1040px; }
  .planner-heading { grid-column: 1 / -1; padding: 22px 2px 18px; }
  .planner-map { position: sticky; top: calc(68px + env(safe-area-inset-top)); }
  .planner-map .route-map-stage { height: clamp(250px, 41svh, 350px); }
  .planner-fields > .planner-section:first-child { margin-top: 0; }
  .city-coverage { font-size: 12px; }
}
@media (max-width: 719px) and (max-height: 650px) {
  .planner-eyebrow { display: none; }
  .planner-heading { padding-block: 10px; }
  .planner-heading h1 { margin: 0; }
  .planner-map .route-map-stage { height: 180px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .app-shell { padding: 0; min-height: 100dvh; }
  .app-frame, .app-frame.is-route { height: 100dvh; min-height: 0; border-radius: 0; }
  .app-frame.is-route { height: var(--route-viewport-height, 100dvh); }
  .planner-map { position: static; }
  .planner-map .route-map-stage { height: 190px; }
  .planner-heading { padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* The itinerary composition. Shared geographic-map controls live in route-planner.css. */
.app-shell:has(.is-route), .app-frame.is-route, .is-route .screen { background: #f5f3ec; }
.is-route .app-header { background: #102d3d; padding-inline: max(16px, calc((100% - 1100px) / 2)); }
.is-route .app-header .header-button, .is-route .app-header .back-button { min-width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; }
.is-route .app-header .guide { color: #edcf96; font-size: 12px; font-weight: 500; }
.is-route .app-header .header-button:not(.guide) { display: none; }
.quote-header-title { position: absolute; left: 50%; transform: translateX(-50%); color: #f8f5ea; font-size: 14px; font-weight: 500; }
.route-planner { --route-ink: #173646; --route-muted: #788683; --route-line: #e7e9e1; --planner-gutter: clamp(16px, 4.4vw, 28px); --atlas: #163546; --mint: #a8d8c8; --sand: #edcf96; display: block; max-width: 680px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); color: var(--route-ink); font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
.route-planner h1, .route-planner h2, .route-planner button, .route-planner input, .route-planner select { font-family: inherit; }
.route-planner button, .route-planner input, .route-planner select { transition: background-color .16s, border-color .16s, color .16s; }
.planner-heading { padding: 22px 3px 17px; gap: 16px; }
.planner-eyebrow { display: block; color: #73827c; font-size: 11px; margin-bottom: 5px; }
.planner-heading h1 { margin: 0; font-size: clamp(25px, 6.8vw, 34px); line-height: 1.4; font-weight: 700; letter-spacing: -.06em; }
.planner-heading h1 em { color: #497c70; font-style: normal; }
.journey-stamp { width: 67px; height: 67px; flex: 0 0 auto; border: 1px solid #a8bdb1; outline: 1px solid #cbd6cb; outline-offset: -5px; border-radius: 50%; color: #608876; transform: rotate(12deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.journey-stamp svg { width: 23px; height: 23px; } .journey-stamp span { font-size: 9px; }
.planner-steps { display: flex; align-items: center; gap: 3px; padding: 7px 0 14px; position: sticky; top: 0; z-index: 900; background: #f5f3ec; }
.planner-steps button { display: flex; gap: 7px; align-items: center; min-height: 40px; padding: 5px 11px; background: transparent; color: #86918b; font-size: 12px; border-radius: 22px; }
.planner-steps button > span { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #d7ddd2; border-radius: 50%; font-family: Arial,sans-serif; font-size: 11px; }
.planner-steps button[aria-current="step"] { color: #204a46; background: #e1e9dc; font-weight: 700; }
.planner-steps button[aria-current="step"] > span { border-color: #426e5b; background: #426e5b; color: #fff; }
.draft-status { display: none; align-items: center; gap: 4px; font-size: 11px; color: #7a8d81; margin-left: auto; }
.draft-status svg { width: 13px; height: 13px; }
.planner-layout, .planner-fields { display: block; min-width: 0; padding: 0; }
.journey-panel { min-width: 0; border-radius: 25px; overflow: hidden; background: var(--atlas); box-shadow: 0 8px 28px #15333c0b; }
.journey-route { padding: 16px 21px 10px; color: #fff8e9; }
.journey-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journey-topline > span { display: flex; align-items: center; gap: 6px; color: #b3c9cb; font-size: 11px; }
.journey-topline > span svg { width: 14px; height: 14px; }
.text-command { color: #497a6c; min-height: 40px; font-size: 12px; }
.text-command svg { width: 15px; height: 15px; }
.journey-topline .text-command { color: #e4c58b; font-size: 11px; }
.city-input-row { grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr); gap: 14px; align-items: center; padding: 8px 0 9px; }
.planner-field { gap: 7px; } .planner-field > span { color: #70817d; }
.planner-field input, .planner-field select { border-color: #e4e7df; border-radius: 12px; background: #f8f9f4; color: #25444d; padding: 10px 12px; height: 48px; font-size: 16px; }
.planner-field input:focus, .planner-field select:focus { background: #fff; border-color: #8fb3a5; }
.planner-field input::placeholder { color: #9aa7a0; font-size: 13px; font-weight: 400; }
.city-input-row .planner-field { gap: 0; }
.city-input-row .planner-field > span { color: #a7c0c4; font-size: 11px; }
.city-input-row .planner-field > span::before { display: none; }
.city-input-row .planner-field input { padding: 6px 0; height: 51px; color: #fff8e9; font-size: clamp(24px, 7.2vw, 34px); font-weight: 700; background: transparent; border: 0; border-bottom: 1px solid #476171; border-radius: 0; }
.city-input-row .planner-field input:focus { border-color: #b0dbcd; background: #ffffff06; }
.destination-field > span, .destination-field input { text-align: right; }
.city-input-row.has-long-city { grid-template-columns: minmax(0,1fr) 44px; gap: 12px; }
.has-long-city .origin-field { grid-column: 1; grid-row: 1; }
.has-long-city .destination-field { grid-column: 1; grid-row: 2; }
.has-long-city .swap-cities { grid-column: 2; grid-row: 1 / 3; transform: rotate(90deg); margin-top: 0; }
.has-long-city .destination-field > span, .has-long-city .destination-field input { text-align: left; }
.city-input-row input::-webkit-calendar-picker-indicator { opacity: 0; display: none !important; }
.swap-cities { background: #ffffff0b; border: 1px solid #6d858459; color: #e0c795; margin-top: 18px; }
.swap-cities:hover { background: #ffffff15; } .swap-cities svg { width: 20px; height: 20px; }
.city-directory { margin-top: 0; border: 0; } .city-directory > summary { display: none; } .city-directory[open] { padding: 10px 0 4px; }
.city-side { border-color: #3d5868; margin-bottom: 10px; }
.city-side button { min-height: 44px; color: #a2bcc3; }
.city-side .active { border-color: #ddc084; color: #f3dca8; }
.city-filters { grid-template-columns: 1.2fr 1fr; }
.city-filters input, .city-filters select { color: #e6eeeb; background: #264656; border-color: #446271; border-radius: 10px; }
.city-filters input::placeholder { color: #a0b7bc; font-size: 13px; }
.city-results { gap: 5px; max-height: 224px; overscroll-behavior: contain; margin-top: 10px; }
.city-results button { background: #ffffff06; font-size: 12px; color: #d0dfdd; padding: 6px 3px; border-radius: 8px; }
.city-results button:hover, .city-results button:focus-visible { background: #46675c; color: #fff; }
.city-directory .field-hint { color: #9bb5bc; margin-bottom: 4px; }
.planner-map { position: static; border: 0; border-radius: 0; background: #163546; }
.map-heading { padding: 8px 20px; gap: 10px; background: transparent; }
.map-heading > div { gap: 6px; } .map-heading strong { color: #b5c9c9; font-size: 11px; font-weight: 400; }
.map-heading > span { color: #cfbea0; font-size: 10px; max-width: 50%; }
.route-dot { height: 5px; width: 5px; background: #b4d8c9; }
.planner-map .route-map-stage { height: clamp(200px, 57vw, 260px); }
.route-planner .route-map-stage, .route-planner .leaflet-container, .route-planner .south-sea-inset { background: #163546; }
.route-planner .map-loading { background: #163546; color: #b5cdcc; }
.route-planner .map-city-label { color: #d5e1d4; text-shadow: 0 1px 2px #143040; font-size: 10px; gap: 3px; }
.route-planner .map-city-dot { background: #a6c7c4; border-color: #a6c7c4; }
.route-planner .map-controls, .route-planner .map-view-controls { background: #224456ed; border-color: #4b657266; box-shadow: none; }
.route-planner .map-controls { border-radius: 13px; gap: 0; }
.route-planner .map-controls button { width: 40px; height: 40px; background: none; }
.route-planner .map-controls button + button { border-top: 1px solid #d2dfd830; }
.route-planner .map-controls button, .route-planner .map-view-controls button { color: #bdd4d3; }
.route-planner .map-view-controls { border-radius: 18px; padding: 3px; }
.route-planner .map-view-controls button { min-width: 55px; min-height: 36px; font-size: 11px; border: 0; border-radius: 15px; }
.route-planner .map-view-controls button[aria-pressed="true"] { background: #bfd9c8; color: #264e4e; border-radius: 15px; }
.route-planner .south-sea-inset { border-color: #526e79; border-radius: 4px; overflow: hidden; }
.route-planner .south-sea-inset > span { color: #a7c3c9; font-size: 9px; }
.route-planner .map-source, .route-planner .map-plan-label { background: #163546d9; color: #98b6bf; font-size: 9px; }
.route-planner .map-source a { text-decoration: none; }
.route-planner .route-endpoint.leaflet-tooltip { background: #cee7d6; border-color: #cee7d6; color: #285349; font-size: 11px; border-radius: 6px; padding: 4px 7px; }
.route-planner .route-endpoint.endpoint-1 { background: #f0d39d; border-color: #f0d39d; color: #63502e; }
.route-planner .leaflet-tooltip-top::before { border-top-color: #f0d39d; }
.route-planner .leaflet-tooltip-bottom::before { border-bottom-color: #cee7d6; }
.route-planner .map-transport-marker > span { background: #f3dfb4; border-color: #f7e7c6; color: #3c524e; box-shadow: 0 0 0 5px #e3c89618; }
.map-bottom { justify-content: space-between; gap: 8px; padding: 10px 19px 14px; color: #91adb6; font-size: 10px; background: transparent; }
.map-bottom svg { width: 12px; height: 12px; }
.journey-addresses { padding: 20px; background: #fffef9; border: 1px solid #e8e8de; border-top: 0; border-radius: 0 0 25px 25px; }
.planner-section-head { gap: 12px; margin-bottom: 13px; }
.planner-section-head h2 { font-size: 19px; line-height: 1.5; color: #183a46; }
.journey-addresses .planner-section-head { margin-bottom: 8px; } .journey-addresses h2 { font-size: 14px; }
.optional-hint { color: #95a098; font-size: 10px; white-space: nowrap; }
.address-fields { gap: 12px; margin-top: 10px; position: relative; }
.address-fields::before { content: ''; position: absolute; left: 10px; top: 17px; height: calc(100% - 42px); border-left: 1px dashed #ccd6ca; }
.address-fields .planner-field { position: relative; gap: 0; padding-left: 29px; }
.address-fields .planner-field > span { display: flex; align-items: center; gap: 7px; color: #526963; font-size: 11px; }
.address-fields .planner-field i { position: absolute; top: 0; left: 0; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #e1ecdf; color: #517965; font-style: normal; font-size: 10px; }
.address-fields .planner-field:last-child i { background: #f4e9d6; color: #a38553; }
.address-fields b { margin-left: auto; color: #728578; font-weight: 400; }
.address-fields input { border: 0; border-bottom: 1px solid #e8e9df; background: transparent; height: 39px; padding: 6px 0; border-radius: 0; }
.field-hint { color: #8a968e; font-size: 11px; line-height: 1.8; margin: 12px 0 0; }
.journey-addresses .field-hint { display: flex; align-items: center; gap: 5px; font-size: 10px; margin-top: 14px; }
.field-hint svg { width: 12px; height: 12px; flex: 0 0 auto; }
.planner-section { margin-top: 24px; padding: 0 2px 24px; border: 0; border-bottom: 1px solid #dedfd5; border-radius: 0; background: none; scroll-margin-top: 72px; }
.planner-section:last-child { border-bottom-color: #dedfd5; }
.section-kicker { display: block; color: #8b978e; font-size: 10px; margin-bottom: 3px; }
.pet-section .text-command { background: #e8ede2; padding: 0 11px; border-radius: 20px; min-height: 35px; color: #4d7664; font-size: 11px; }
.planner-pets { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; gap: 10px; padding: 2px 0 7px; }
.route-planner .quote-pet-card { min-width: 173px; flex: 1 0 173px; max-width: 245px; gap: 10px; min-height: 88px; padding: 12px; border: 1px solid #e1e4d9; border-radius: 18px; background: #fffef9; color: #365341; text-align: left; scroll-snap-align: start; }
.route-planner .quote-pet-card.active { border-color: #739a82; background: #edf2e6; box-shadow: inset 0 0 0 1px #739a8220; }
.pet-portrait, .route-planner .quote-pet-card > svg { width: 53px; height: 53px; flex: 0 0 auto; }
.quote-pet-card > span { min-width: 0; }
.route-planner .quote-pet-card strong { font-size: 15px; color: #24464b; overflow-wrap: anywhere; }
.route-planner .quote-pet-card small { font-size: 10px; color: #839086; margin-top: 4px; white-space: normal; }
.pet-selected { position: absolute; right: 7px; top: 7px; width: 15px; height: 15px; display: none; place-items: center; background: #608977; color: #fff; border-radius: 50%; }
.pet-selected svg { width: 10px; height: 10px; } .quote-pet-card.active .pet-selected { display: grid; }
.pet-empty { width: 100%; background: #fffdf6; border: 1px dashed #bbcabb; border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; font-size: 13px; color: #43645e; }
.pet-empty small { display: block; margin-top: 4px; color: #829287; font-size: 11px; } .pet-empty > svg:last-child { width: 20px; height: 20px; margin-left: auto; }
.planner-two-fields { grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: 13px; margin-top: 14px; }
.planner-field > span > small { float: right; color: #a0aaa0; font-size: 10px; }
.weight-control { display: flex; align-items: center; background: #fffef9; border: 1px solid #e1e5da; border-radius: 12px; padding: 0 3px; height: 48px; }
.weight-control input { flex: 1; border: 0; background: none; width: 45px; padding: 3px 0; text-align: center; color: #284a4a; font-weight: 600; height: 40px; appearance: textfield; -moz-appearance: textfield; }
.weight-control input::-webkit-inner-spin-button, .weight-control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.weight-control button { flex: 0 0 35px; min-height: 42px; display: grid; place-items: center; background: none; color: #6e897b; border-radius: 9px; }
.weight-control button:hover { background: #eaf0e4; } .weight-control button svg { width: 15px; height: 15px; }
.planner-two-fields select { font-size: 16px; background: #fffef9; padding-inline: 9px; }
.section-line-icon { color: #95ac9b; transform: rotate(-8deg); } .section-line-icon svg { width: 33px; height: 33px; stroke-width: 1.3; }
.planner-modes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.route-planner .quote-mode-card { position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; min-height: 91px; padding: 14px 12px; background: #fffef9; border: 1px solid #e1e4d9; border-radius: 17px; color: #5b7773; text-align: left; }
.route-planner .quote-mode-card.active { background: #1c3d4c; border-color: #1c3d4c; color: #e6d2a5; }
.mode-illustration { width: 33px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; }
.route-planner .quote-mode-card svg { width: 28px; height: 28px; stroke-width: 1.35; color: inherit; }
.mode-copy { display: block; min-width: 0; }
.route-planner .quote-mode-card strong { display: block; font-size: 15px; color: #35565a; font-weight: 600; }
.route-planner .quote-mode-card small { display: block; font-size: 10px; color: #879489; margin-top: 5px; line-height: 1.5; }
.route-planner .quote-mode-card.active strong { color: #fbf4e2; } .route-planner .quote-mode-card.active small { color: #afc2c3; }
.route-planner .quote-mode-card.active svg { color: #e6d2a5; }
.mode-radio { position: absolute; width: 9px; height: 9px; top: 10px; right: 10px; border: 1px solid #bccabb; border-radius: 50%; }
.quote-mode-card.active .mode-radio { background: #e4c389; border-color: #e4c389; box-shadow: 0 0 0 3px #e4c38918; }
.departure-field { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 8px; padding: 15px 0; border-bottom: 1px solid #e3e6da; margin-top: 8px; }
.departure-field > span { display: flex; align-items: center; gap: 7px; color: #577068; } .departure-field > span svg { width: 17px; height: 17px; }
.departure-field input { background: #fffef9; padding: 8px; height: 44px; }
.services-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 20px 0 5px; }
.services-heading strong { font-size: 13px; font-weight: 600; } .services-heading span { font-size: 10px; color: #8f9b90; }
.planner-services { display: grid; gap: 0; margin: 0; }
.planner-services label { gap: 11px; position: relative; min-height: 64px; border-bottom: 1px solid #e6e7dd; cursor: pointer; }
.planner-services label > svg { width: 20px; height: 20px; stroke-width: 1.5; color: #7e9987; }
.planner-services label > span { flex: 1; min-width: 0; }
.planner-services strong { font-size: 12px; font-weight: 500; color: #45605b; display: block; }
.planner-services small { display: block; color: #99a398; font-size: 10px; margin-top: 3px; }
.planner-services input { position: absolute; right: 0; width: 44px; height: 44px; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.service-toggle { width: 37px; height: 22px; background: #d6ded2; border-radius: 20px; position: relative; transition: background-color .16s; }
.service-toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fffefa; transition: transform .16s; box-shadow: 0 1px 3px #375c4220; }
.planner-services input:checked + .service-toggle { background: #618973; } .planner-services input:checked + .service-toggle::after { transform: translateX(15px); }
.planner-services input:focus-visible + .service-toggle { outline: 2px solid #366c59; outline-offset: 4px; }
.planner-price { padding: 0; margin-top: 24px; border: 1px solid #e4e0d3; border-radius: 21px; background: #fffdf4; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; padding: 17px 20px; border-bottom: 1px dashed #d7d2bf; }
.ticket-top::before, .ticket-top::after { content: ''; position: absolute; bottom: -7px; height: 14px; width: 14px; background: #f5f3ec; border: 1px solid #e4e0d3; border-radius: 50%; }
.ticket-top::before { left: -8px; clip-path: inset(0 0 0 50%); } .ticket-top::after { right: -8px; clip-path: inset(0 50% 0 0); }
.ticket-top > span:first-child { display: flex; gap: 7px; align-items: center; font-size: 12px; color: #737b65; }
.ticket-top svg { width: 18px; height: 18px; color: #a99160; stroke-width: 1.5; }
#quoteStatus { font-size: 10px; color: #6d977f; padding: 3px 7px; border-radius: 5px; background: #eaf0e1; }
.ticket-body { padding: 19px 20px; } .price-title { color: #8a927f; font-size: 11px; }
.price-amount { min-height: 64px; padding: 2px 0 11px; } .price-amount > small { display: none; }
.price-amount > strong { font-family: Arial,"Microsoft YaHei",sans-serif; font-size: 43px; line-height: 1.35; letter-spacing: -.04em; color: #284d43; font-weight: 500; }
.price-amount > strong > span { font-size: 23px; padding-right: 4px; }
.price-route { border-color: #e8e8da; color: #536954; } .price-route svg { width: 18px; height: 18px; color: #afab8c; } .price-route > span { color: #8d9680; }
.ticket-passenger { display: flex; gap: 6px; align-items: center; color: #8c927d; font-size: 11px; margin: 0 0 13px; } .ticket-passenger svg { width: 13px; height: 13px; }
.price-details > summary { font-size: 12px; } .price-details dl > div { font-size: 11px; } .price-details dt { color: #8a927e; } .price-details dd { color: #5d6c51; }
.price-disclaimer { color: #969b87; font-size: 10px; }
.planner-submit { min-height: 49px; padding: 12px 16px; color: #fff7e9; background: #234d4b; border-radius: 13px; font-size: 13px; font-weight: 500; }
.planner-submit:hover:not(:disabled) { background: #173d3b; } .planner-submit:disabled { background: #acb9ab; }
.price-footnote { display: flex; gap: 5px; align-items: center; justify-content: center; font-size: 10px; color: #8e9a83; margin: 13px 0 0; } .price-footnote svg { width: 12px; height: 12px; }
.journey-signoff { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: #9daa96; padding: 12px 0 0; } .journey-signoff svg { width: 14px; height: 14px; }
.quote-summary-dock { bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, calc((100% - 620px) / 2)); right: max(12px, calc((100% - 620px) / 2)); background: #163646; color: #f5eedb; border: 1px solid #ffffff12; border-radius: 21px; padding: 12px 13px 12px 19px; gap: 12px; box-shadow: 0 8px 25px #14334228; }
.quote-summary-dock > div { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.quote-summary-dock small { color: #afc4c2; font-size: 10px; }
.quote-summary-dock strong { color: #f5e6c7; font-family: Arial,"Microsoft YaHei",sans-serif; font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.quote-summary-dock button { min-height: 45px; padding: 10px 18px; gap: 9px; border-radius: 14px; background: #d5e7c6; color: #234d44; font-size: 13px; }
.quote-summary-dock button:hover { background: #e2efda; } .quote-summary-dock button svg { width: 17px; height: 17px; }
@media (min-width: 460px) { .draft-status { display: flex; } .planner-steps { gap: 8px; } .journey-route { padding-inline: 25px; } }
@media (max-width: 360px) {
  .route-planner { --planner-gutter: 13px; } .planner-heading { padding-top: 16px; padding-bottom: 12px; }
  .journey-stamp { width: 56px; height: 56px; } .journey-stamp span { font-size: 8px; }
  .planner-steps { justify-content: space-between; gap: 0; padding-bottom: 10px; } .planner-steps button { padding-inline: 8px; gap: 6px; }
  .journey-route { padding: 12px 17px 7px; } .city-input-row { gap: 9px; padding-top: 5px; }
  .planner-map .route-map-stage { height: 200px; } .map-heading { padding-inline: 15px; }
  .journey-addresses { padding: 17px; } .planner-two-fields { gap: 8px; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
  .weight-control button { flex-basis: 30px; } .planner-two-fields select { padding-inline: 6px; }
  .route-planner .quote-mode-card { gap: 6px; padding: 12px 8px; min-height: 100px; }
  .mode-illustration { width: 25px; } .route-planner .quote-mode-card svg { width: 25px; height: 25px; }
  .departure-field { grid-template-columns: .88fr 1.12fr; } .departure-field input { padding-inline: 5px; }
  .planner-section-head h2 { font-size: 17px; } .journey-addresses .planner-section-head h2 { font-size: 13px; }
  .quote-summary-dock { bottom: max(9px, env(safe-area-inset-bottom)); padding: 10px 11px 10px 16px; }
}
@media (min-width: 680px) and (max-width: 1023px) {
  .route-planner { padding-top: 10px; } .planner-heading { padding-top: 26px; padding-bottom: 22px; }
  .journey-route { padding: 21px 28px 12px; } .city-input-row .planner-field input { height: 59px; font-size: 38px; }
  .planner-map .route-map-stage { height: 290px; } .journey-addresses { padding: 23px 28px; }
  .address-fields { grid-template-columns: 1fr 1fr; gap: 22px; } .address-fields::before { display: none; }
  .planner-section { padding-bottom: 28px; margin-top: 30px; }
  .planner-fields > .planner-section:first-child { margin-top: 30px; }
  .route-planner .quote-pet-card { max-width: none; min-height: 102px; } .pet-portrait, .route-planner .quote-pet-card > svg { width: 64px; height: 64px; }
  .planner-modes { grid-template-columns: repeat(4,minmax(0,1fr)); } .route-planner .quote-mode-card { flex-direction: column; align-items: flex-start; gap: 7px; padding: 17px; }
}
@media (min-width: 1024px) {
  .route-planner { max-width: 1160px; } .planner-heading { padding: 31px 2px 23px; }
  .planner-heading h1 { font-size: 35px; } .journey-stamp { margin-right: 8px; width: 74px; height: 74px; }
  .planner-steps { padding-bottom: 22px; } .planner-layout { display: grid; grid-template-columns: minmax(0,.97fr) minmax(0,1.1fr); align-items: start; gap: 42px; }
  .journey-panel { position: sticky; top: 82px; } .journey-route { padding: 23px 27px 12px; }
  .city-input-row { padding-top: 16px; } .city-input-row .planner-field input { font-size: 38px; height: 62px; }
  .planner-map .route-map-stage { height: 310px; } .journey-addresses { padding: 25px 27px; }
  .planner-section:first-child { margin-top: 0; } .planner-section-head h2 { font-size: 21px; } .journey-addresses .planner-section-head h2 { font-size: 14px; }
  .route-planner .quote-pet-card { min-height: 100px; max-width: none; } .pet-portrait, .route-planner .quote-pet-card > svg { width: 63px; height: 63px; }
  .route-planner .quote-mode-card { padding: 17px; min-height: 92px; } .mode-illustration { width: 43px; } .route-planner .quote-mode-card svg { width: 32px; height: 32px; }
  .ticket-body { padding: 24px; } .ticket-top { padding-inline: 24px; }
  .quote-summary-dock { left: max(24px, calc((100% - 1100px) / 2)); right: max(24px, calc((100% - 1100px) / 2)); border-radius: 18px; }
  .quote-summary-dock > div { flex-direction: row; align-items: baseline; gap: 15px; } .quote-summary-dock button { min-width: 190px; }
}
@media (max-height: 600px) { .journey-panel { position: static; } }
@media (max-height: 500px) and (orientation: landscape) {
  .planner-heading { padding-block: 12px; } .journey-stamp { display: none; } .planner-steps { padding-bottom: 8px; }
  .planner-map .route-map-stage { height: 200px; } .quote-summary-dock { padding-block: 7px; bottom: 8px; } .quote-summary-dock > div { flex-direction: row; align-items: baseline; gap: 10px; }
}
/* Keep the pet editor in the same visual language as the itinerary. */
body:has(.is-route) .modal:has(#petForm) { --ink: #25484c; --muted: #7c8f86; --ice: #325852; --gold-bright: #3d7968; background: #fffdf6; color: #25484c; border-color: #e0e6d7; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; border-radius: 26px; box-shadow: 0 20px 70px #102d3d30; }
body:has(.is-route) .modal:has(#petForm) .booking-kicker { color: #7b9180; }
body:has(.is-route) .modal:has(#petForm) h2 { color: #214451; font-size: 22px; }
body:has(.is-route) .modal:has(#petForm) .modal-head p { font-size: 12px; color: #88998c; }
body:has(.is-route) .modal:has(#petForm) .pet-form-intro { background: #eaf0e3; border: 0; padding: 15px; }
body:has(.is-route) .modal:has(#petForm) .pet-form-intro strong { font-size: 13px; }
body:has(.is-route) .modal:has(#petForm) .pet-form-intro small { font-size: 11px; }
body:has(.is-route) .modal:has(#petForm) .form-field label { font-size: 12px; color: #667f70; }
body:has(.is-route) .modal:has(#petForm) input, body:has(.is-route) .modal:has(#petForm) select { font-size: 16px; height: 47px; background: #f6f8f0; color: #285046; border-color: #dce5d6; border-radius: 12px; }
body:has(.is-route) .modal:has(#petForm) .modal-primary { background: #234e4b; color: #fff8e8; border: 0; font-size: 13px; }
body:has(.is-route) .modal:has(#petForm) .modal-secondary, body:has(.is-route) .modal:has(#petForm) .close-button { background: #e8eee1; color: #4d7261; border: 0; font-size: 13px; }
@media (max-width: 560px) { body:has(.is-route) .modal:has(#petForm) { border-radius: 26px 26px 0 0; } }

/* A pet's travel atlas: real geography, gentle moving details. */
.map-city-picker { display: flex; align-items: center; gap: 6px; padding: 7px 17px 4px; }
.map-pick-city { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid #88ada127; border-radius: 13px; background: #ffffff04; color: #b3c7c0; text-align: left; cursor: pointer; transition: border-color .22s, background .22s, transform .2s; }
.map-pick-city.active { border-color: #a9c3a688; background: #a4c3ad16; }
.map-pick-city:active { transform: scale(.96); }.map-pick-city > span:nth-child(2) { min-width: 0; flex: 1; }
.map-pick-city small { display: block; color: #a3bab4; font-size: 9px; line-height: 1.4; }.map-pick-city strong { display: block; font-size: 12px; font-weight: 600; color: #eff1d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.map-pick-number { width: 23px; height: 23px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 10px; background: #aac9b825; color: #c9dfb8; }
.map-pick-city[data-side="destination"] .map-pick-number { background: #eed6a725; color: #efd6a7; }
.map-pick-city > svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }.map-pick-city.active > svg { opacity: .8; }
.map-pick-path { display: flex; align-items: center; gap: 3px; color: #a9bca778; font-size: 11px; }.map-pick-path svg { width: 12px; height: 12px; transform: rotate(20deg); }
.city-input-row .planner-field { transition: background .22s, box-shadow .22s; border-radius: 10px; }.city-input-row .planner-field.is-selecting { box-shadow: inset 0 -2px #c1d2ac66; }
.city-results button { position: relative; transition: transform .16s, background .2s, color .2s; min-height: 42px; }
.city-results button:active { transform: scale(.93); }
.city-results button[data-selected="origin"] { background: #c8ddbf; color: #244f48; }
.city-results button[data-selected="destination"] { background: #edd8ad; color: #645335; }
.city-role { display: block; font-size: 8px; line-height: 1.2; opacity: .7; }.city-role:empty { display: none; }
.pet-map { contain: paint; }.pet-map.map-arrived { animation: atlas-arrive .65s cubic-bezier(.2,.7,.2,1) both; }
.map-daydream { position: absolute; inset: 0; pointer-events: none; z-index: 420; overflow: hidden; }
.map-cloud { position: absolute; width: 63px; height: 29px; fill: #dce6cc; opacity: .11; animation: atlas-cloud 9s ease-in-out infinite alternate; }
.cloud-one { left: 5%; top: 5%; }.cloud-two { width: 44px; right: 18%; bottom: 13%; animation-delay: -5s; opacity: .08; }
.map-twinkle { position: absolute; left: 16%; top: 28%; color: #f0d39c; font-size: 12px; animation: atlas-twinkle 4s ease-in-out infinite; opacity: .55; }
.map-whisper { position: absolute; bottom: 27px; left: 12px; color: #adbdac; font-size: 9px; letter-spacing: 1px; opacity: .7; }
.pet-route-trail { animation: route-stream 1.6s linear infinite; }
.pet-map .leaflet-pane > svg { width: auto; height: auto; max-width: none; max-height: none; }
.pet-travel-marker { pointer-events: none !important; }.travel-motion { display: block; width: 56px; height: 56px; will-change: transform; }
.travel-buddy { display: block; width: 56px; height: 56px; transform: scaleX(var(--travel-direction, 1)); filter: drop-shadow(0 3px 2px #12332c35); }
.travel-buddy svg { width: 56px; height: 56px; }.travel-buddy.is-flying svg { animation: buddy-float 2.4s ease-in-out infinite; }.travel-buddy.is-driving svg { animation: buddy-ride .7s ease-in-out infinite; }
.pet-city-pin { pointer-events: none !important; --pin-color: #cee0b9; }.pet-city-pin.pin-1 { --pin-color: #f0d2a0; }
.pin-face { position: absolute; inset: 0 0 6px; background: var(--pin-color); border: 2px solid #ffffe9cc; border-radius: 50% 50% 50% 5px; transform: rotate(-45deg); box-shadow: 0 2px 4px #163d3540; animation: pin-arrive .5s cubic-bezier(.2,1.5,.5,1) both; }
.pin-face svg { display: block; width: 18px; height: 18px; margin: 1px; transform: rotate(45deg); fill: #506d56; }.pin-1 .pin-face svg { fill: #94744d; }
.pin-halo { position: absolute; top: 13px; left: 2px; width: 21px; height: 14px; border-radius: 50%; background: var(--pin-color); animation: pin-breathe 2.8s ease-out infinite; opacity: .25; }.pin-1 .pin-halo { animation-delay: 1.4s; }
.pet-map .route-endpoint.leaflet-tooltip { border-radius: 10px; padding: 4px 7px; font-size: 10px; box-shadow: 0 3px 8px #163a3220; }
.city-selection-ripple { pointer-events: none; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #f3ddb3; z-index: 630; }
.pet-map[data-motion="paused"] *, .pet-map[data-motion="paused"] *::before { animation-play-state: paused !important; }
:is(.profile-admin-entry, .profile-boarding-entry) { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 17px 14px; border: 1px solid #d5d7b726; background: #a3bfa10b; border-radius: 18px; color: #eee4ca; text-decoration: none; transition: background .2s, transform .2s; }
:is(.profile-admin-entry, .profile-boarding-entry):active { transform: scale(.98); background: #a3bfa120; }.profile-admin-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 14px; background: #d6d7b019; color: #cdd7ac; }.profile-admin-icon svg { width: 21px; height: 21px; }:is(.profile-admin-entry, .profile-boarding-entry) > span:nth-child(2) { flex: 1; min-width: 0; }:is(.profile-admin-entry, .profile-boarding-entry) strong { display: block; font-size: 14px; font-weight: 500; }:is(.profile-admin-entry, .profile-boarding-entry) small { display: block; margin-top: 5px; color: #96aca7; font-size: 10px; }:is(.profile-admin-entry, .profile-boarding-entry) > svg { width: 18px; height: 18px; color: #acc1ac; }
@keyframes atlas-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes atlas-cloud { to { transform: translateX(15px); } }
@keyframes atlas-twinkle { 50% { opacity: .25; transform: scale(.7) rotate(15deg); } }
@keyframes route-stream { to { stroke-dashoffset: -22; } }
@keyframes buddy-float { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes buddy-ride { 50% { transform: translateY(-1.5px) rotate(1deg); } }
@keyframes pin-breathe { from { opacity: .4; transform: scale(.65); } to { opacity: 0; transform: scale(2.3); } }
@keyframes pin-arrive { from { opacity: 0; transform: translateY(-10px) rotate(-45deg) scale(.5); } to { opacity: 1; transform: rotate(-45deg) scale(1); } }
@media (max-width: 360px) { .map-city-picker { padding-inline: 12px; }.map-pick-path { gap: 0; }.map-pick-city { padding-inline: 6px; gap: 5px; }.map-whisper { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .pet-map *, .pet-map, .pin-face, .city-results button { animation: none !important; transition: none !important; } }

/* A route opens into a small travel scene, within the phone viewport. */
.planner-map .route-map-stage { transition:height .45s cubic-bezier(.22,.8,.24,1); }
.planner-map.is-expanded .route-map-stage {height:clamp(280px,49svh,500px);}
.map-heading {gap:8px;flex-wrap:wrap;}
.map-heading > div {min-width:0;flex:1;}.map-heading strong{overflow-wrap:anywhere;}
.map-heading #routeDistance {font-size:10px;}
.map-expand {display:flex;gap:4px;align-items:center;border:1px solid #ffffff21;background:#ffffff09;border-radius:9px;color:#d8dfcc;font-size:10px;padding:7px 9px;min-height:36px;}
.map-expand svg {width:13px;height:13px;}
.journey-movie-caption {position:absolute;z-index:620;bottom:30px;left:12px;right:76px;display:flex;gap:9px;align-items:center;background:#0a2639ee;border:1px solid #eac18a24;border-radius:13px;padding:10px 11px;box-shadow:0 6px 20px #05182830;pointer-events:none;}
.journey-movie-caption[hidden] {display:none;}
.journey-movie-caption strong {display:block;color:#f2e3c9;font-size:12px;font-weight:500;}.journey-movie-caption small {display:block;color:#9eb9bd;font-size:10px;margin-top:4px;}
.journey-movie-caption>div {flex:1;min-width:0;}.journey-movie-caption button{pointer-events:auto;display:grid;place-items:center;min-width:36px;height:36px;border:0;border-radius:50%;background:#e6cd9d16;color:#ebcf9e;}
.journey-movie-caption svg {width:16px;height:16px;}.journey-movie-dot{width:6px;height:6px;border-radius:50%;background:#eac18a;box-shadow:0 0 0 5px #eac18a15;animation:journey-pulse 2s ease-in-out infinite;}
.planner-map .map-whisper {display:none;}.planner-map .map-plan-label{font-size:8px;}
.planner-map .map-view-controls {top:14px;bottom:auto;left:12px;}
.planner-map:not(.is-expanded) .journey-movie-caption{bottom:28px;right:auto;padding:7px 10px;}.planner-map:not(.is-expanded) .journey-movie-caption strong{display:none;}.planner-map:not(.is-expanded) .journey-movie-caption small{margin:0;}.planner-map:not(.is-expanded) .journey-movie-caption button{height:28px;min-width:28px;}
.planner-map.is-expanded .travel-buddy,.planner-map.is-expanded .travel-buddy svg{width:64px;height:64px;}
@keyframes journey-pulse{50%{box-shadow:0 0 0 8px #eac18a00;opacity:.6}}
@media(min-width:1024px){.planner-map.is-expanded .route-map-stage{height:500px;}}
@media(max-height:600px){.planner-map.is-expanded .route-map-stage{height:300px;}}
@media(prefers-reduced-motion:reduce){.planner-map .route-map-stage{transition:none}.journey-movie-dot{animation:none}}


/* Top map frame is the route selector, not an immutable default route. */
.map-route-fields{padding:16px;background:var(--planner-surface,#f8f6ec);color:var(--planner-ink,#29443e);border-bottom:1px solid rgba(40,70,60,.1)}
.map-route-fields .city-input-row{margin:0;gap:8px;align-items:center}.map-route-fields .planner-field{min-width:0}.map-route-fields input{width:100%;min-width:0;background:rgba(60,90,70,.04);font-size:16px;min-height:44px;border-radius:8px}.map-route-fields>.text-command{min-height:40px;margin-top:8px}.map-route-fields .city-input-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}
.map-route-fields .swap-cities{width:44px;min-height:44px}.map-heading{gap:8px;flex-wrap:wrap}.map-heading #routeDistance{font-variant-numeric:tabular-nums}
@media(max-width:440px){.map-route-fields{padding:12px}.map-route-fields .city-input-row{gap:4px;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}.map-route-fields .swap-cities{width:40px}}

.route-planner .map-route-fields .planner-field>span{color:#45625b!important}.route-planner .map-route-fields .planner-field input{color:#24483f!important;background:#eef0e7!important;border:1px solid rgba(44,70,62,.14)!important;box-shadow:none!important;font-size:17px!important;font-weight:650!important;padding:12px!important;width:100%!important}.route-planner .map-route-fields .planner-field input::placeholder{color:#617b70!important;opacity:1}.route-planner .map-route-fields .planner-field{border:0!important;background:transparent!important;padding:0!important}.route-planner .map-route-fields .city-input-row{gap:8px!important}.route-planner .map-route-fields .swap-cities{color:#37594e!important;background:#e4eadc!important;border:0!important;width:44px!important;height:44px!important}.route-planner .map-route-fields>.text-command{border:0;background:transparent;color:#3f6355!important;padding:8px 0}.route-planner .map-route-fields{position:relative;z-index:2}.route-planner .map-route-fields select,.route-planner .map-route-fields input{font-variant-numeric:normal}