:root {
  --ink: #151827;
  --muted: #74788b;
  --paper: #e9ecf4;
  --card: rgba(249, 250, 255, .76);
  --line: rgba(31, 39, 67, .10);
  --green: #52638f;
  --green-soft: rgba(199, 209, 223, .62);
  --orange: #2f3954;
  --shadow: 0 24px 70px rgba(47, 57, 84, .20);
  font-family: "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100dvh; background: radial-gradient(circle at 12% 8%, rgba(255,224,211,.72), transparent 31%), radial-gradient(circle at 92% 42%, rgba(153,176,228,.65), transparent 36%), linear-gradient(155deg,#eef0f6,#dfe4f1 58%,#e9e4ec); }
.os-scene { min-height: 100dvh; position: relative; overflow: hidden; transition: transform .72s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1), border-radius .72s cubic-bezier(.16,1,.3,1); transform-origin: 50% 18%; }
.os-scene.is-receded { transform: scale(.925) translateY(12px); filter: blur(12px) saturate(.78) brightness(.76); border-radius: 34px; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 10px max(18px, calc((100vw - 1100px) / 2));
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
.brand { border: 0; background: rgba(255,255,255,.38); padding: 8px 13px; border-radius: 99px; font-weight: 750; font-size: 13px; letter-spacing: -.02em; cursor: pointer; display: flex; align-items: center; gap: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(20px); }
.brand-orb { width: 8px; height: 8px; border-radius: 50%; background: #7187ba; box-shadow: 0 0 0 5px rgba(113,135,186,.15), 0 0 15px rgba(113,135,186,.7); animation: breathe 2.8s ease-in-out infinite; }
.system-time { color: rgba(21,24,39,.62); font-size: 11px; font-weight: 650; }
.top-actions { display: flex; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.48); background: rgba(255,255,255,.4); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 24px rgba(45,55,84,.08); backdrop-filter: blur(20px); }
.icon-btn svg { width: 20px; height: 20px; }

.main { width: min(1100px, 100%); margin: auto; padding: 26px 20px 110px; }
.eyebrow { margin: 0 0 9px; color: var(--green); font-weight: 750; font-size: 13px; letter-spacing: .08em; }
h1 { max-width: 720px; margin: 0; font-size: clamp(32px, 7vw, 64px); line-height: 1.04; letter-spacing: -.055em; }
.lead { margin: 16px 0 22px; max-width: 620px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.discover-main { padding-top: 2px; position: relative; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .52; pointer-events: none; animation: drift 8s ease-in-out infinite alternate; }
.ambient-orb-a { width: 190px; height: 190px; right: -78px; top: -28px; background: rgba(139,164,224,.55); }
.ambient-orb-b { width: 140px; height: 140px; left: -60px; top: 132px; background: rgba(255,196,184,.47); animation-delay: -3s; }
.discover-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.discover-heading h1 { font-size: 34px; letter-spacing: -.055em; }
.discover-heading .eyebrow { margin-bottom: 5px; }
.card-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(14px); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.compact-lead { margin: 7px 0 11px; font-size: 14px; line-height: 1.45; }
.city-switch { flex: 0 0 auto; min-height: 40px; padding: 0 13px 0 15px; border: 1px solid rgba(255,255,255,.62); border-radius: 99px; background: rgba(255,255,255,.5); color: #2f3954; display: flex; align-items: center; gap: 7px; box-shadow: inset 0 1px 0 white, 0 10px 28px rgba(66,78,116,.1); backdrop-filter: blur(20px); font-size: 13px; font-weight: 760; cursor: pointer; transition: transform .24s ease; }
.city-switch:active { transform: scale(.95); }
.city-switch span { color: #7180a7; font-size: 14px; transform: translateY(-1px); }

.interest-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px; }
.glass-row { margin: 0 -2px 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 22px; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 40px rgba(64,72,104,.07); backdrop-filter: blur(24px) saturate(1.2); }
.interest-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.46); border-radius: 99px; background: rgba(255,255,255,.38); font-size: 12px; font-weight: 650; cursor: pointer; transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.68); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { color: #202743; background: rgba(220,228,249,.84); border-color: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 white, 0 7px 20px rgba(82,99,143,.13); }

.recommendation-stack { position: relative; height: 500px; margin-top: 2px; perspective: 1200px; }
.recommendation-stack .recommendation { position: absolute; z-index: 3; inset: 0 0 18px; min-height: 0; will-change: transform; transition: transform .56s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.recommendation-stack .recommendation.is-dragging { transition: none; cursor: grabbing; }
.recommendation-stack .recommendation.swipe-out-left { transform: translate3d(-130%,22px,0) rotate(-13deg) scale(.88) !important; opacity: 0; }
.recommendation-stack .recommendation.swipe-out-right { transform: translate3d(130%,22px,0) rotate(13deg) scale(.88) !important; opacity: 0; }
.stack-preview { position: absolute; left: 50%; bottom: 2px; height: calc(100% - 20px); border-radius: 31px; background-position: center; background-size: cover; box-shadow: 0 16px 42px rgba(47,57,84,.16); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.stack-preview::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(246,243,237,.25); }
.stack-preview-near { z-index: 2; width: 94%; transform: translateX(-50%) translateY(5px); }
.stack-preview-far { z-index: 1; width: 87%; transform: translateX(-50%) translateY(13px); opacity: .55; }

.discover-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: 18px; margin-top: 10px; }
.recommendation { position: relative; min-height: 560px; border: 1px solid rgba(255,255,255,.46); border-radius: 31px; overflow: hidden; color: #fff; box-shadow: 0 26px 70px rgba(39,47,76,.28), inset 0 1px 0 rgba(255,255,255,.65); background: #292d27; touch-action: pan-y; user-select: none; view-transition-name: destination-card; }
.recommendation::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,24,44,.02) 20%, rgba(14,17,31,.26) 50%, rgba(11,13,24,.9) 100%); pointer-events: none; }
.card-glow { position: absolute; z-index: 1; width: 170px; height: 170px; right: -35px; top: -38px; border-radius: 50%; background: rgba(161,183,244,.4); filter: blur(35px); mix-blend-mode: screen; }
.card-favorite { position: absolute; z-index: 5; top: 17px; right: 17px; width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(20,25,42,.28); color: white; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(10,14,25,.18); backdrop-filter: blur(18px); cursor: pointer; transition: transform .24s ease, background .24s ease, color .24s ease; }
.card-favorite:active { transform: scale(.9); }
.card-favorite svg { width: 22px; height: 22px; }
.card-favorite.is-saved { color: #2f3954; background: rgba(255,255,255,.9); }
.card-favorite.is-saved svg { fill: currentColor; }
.cover { width: 100%; height: 100%; position: absolute; object-fit: cover; opacity: .93; pointer-events: none; -webkit-user-drag: none; }
.card-badge { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(25,31,53,.3); backdrop-filter: blur(18px); font-size: 9px; letter-spacing: .12em; font-weight: 750; }
.card-content { position: absolute; z-index: 2; inset: auto 0 0; padding: 24px 22px 22px; }
.match { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #e2f6e4; font-size: 13px; font-weight: 700; }
.match-dot { width: 7px; height: 7px; border-radius: 50%; background: #82d98f; box-shadow: 0 0 0 5px rgba(130,217,143,.16); }
.card-content h2 { max-width: 310px; font-size: clamp(28px, 5vw, 40px); line-height: 1.04; letter-spacing: -.045em; margin: 0; }
.tagline { margin: 9px 0 13px; color: rgba(255,255,255,.82); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.13); backdrop-filter: blur(8px); font-size: 11px; }
.card-actions { display: grid; grid-template-columns: 58px 1fr; gap: 10px; margin-top: 20px; }
.round-action, .primary { height: 54px; border: 0; cursor: pointer; font-weight: 750; }
.round-action { border-radius: 16px; background: rgba(255,255,255,.16); color: white; font-size: 22px; }
.primary { border-radius: 16px; background: #fff; color: var(--ink); }
.primary.orange { background: var(--orange); color: white; }
.recommendation-stack .card-actions { grid-template-columns: .82fr 1.18fr; margin-top: 16px; }
.map-action { height: 50px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; background: rgba(255,255,255,.11); color: white; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 750; cursor: pointer; backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.map-action svg { width: 18px; height: 18px; }
.recommendation-stack .primary { height: 50px; border-radius: 99px; background: rgba(247,249,255,.94); box-shadow: 0 10px 28px rgba(11,14,28,.18); }
.swipe-cue { display: flex; justify-content: space-between; margin-top: 15px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 650; }

.map-panel { position: relative; min-height: 560px; border-radius: 28px; overflow: hidden; background: #e4e2db; border: 1px solid var(--line); }
#map { position: absolute; inset: 0; }
#expanded-map { position: absolute; inset: 0; }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; background: radial-gradient(circle at 25% 25%, #e9eee5, #ddd9cf); }
.map-placeholder-inner { max-width: 300px; }
.map-placeholder h3 { margin: 14px 0 7px; }
.map-placeholder p { color: var(--muted); line-height: 1.55; font-size: 14px; }
.ghost-map { width: 78px; height: 78px; margin: auto; border-radius: 24px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); }
.ghost-map svg { width: 36px; height: 36px; color: var(--green); }
.small-btn { min-height: 40px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; }
.map-caption { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 14px; padding: 13px 15px; border-radius: 15px; background: rgba(255,253,248,.9); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(30,30,20,.12); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.map-caption strong { display: block; font-size: 14px; }
.map-caption span { color: var(--muted); font-size: 12px; }

.map-view-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: rgba(32,39,65,.18); backdrop-filter: blur(5px); }
.map-view-backdrop.is-open { animation: backdrop-in .56s ease both; }
.map-view-backdrop.is-closing { animation: backdrop-out .52s ease both; pointer-events: none; }
.map-view { width: min(430px, 100%); height: 100dvh; display: grid; grid-template-rows: 66px minmax(0, 1fr) auto; background: var(--paper); overflow: hidden; transform-origin: 27% 80%; box-shadow: 0 38px 100px rgba(28,35,62,.32); }
.is-open .map-view { animation: map-expand .72s cubic-bezier(.16,1,.3,1) both; }
.is-closing .map-view { animation: map-collapse .52s cubic-bezier(.7,0,.84,0) both; }
.map-view-header { z-index: 3; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.35); background: rgba(239,242,250,.68); backdrop-filter: blur(24px); }
.map-view-header div { min-width: 0; }
.map-view-header strong, .map-view-header span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-view-header strong { font-size: 15px; }
.map-view-header span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.map-close { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(255,255,255,.52); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 white; }
.map-locate { min-height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.65); border-radius: 99px; background: rgba(255,255,255,.52); color: var(--green); font-size: 11px; font-weight: 750; cursor: pointer; box-shadow: inset 0 1px 0 white; }
.expanded-map-wrap { position: relative; min-height: 0; background: #e4e2db; }
.map-region-summary { display: grid; grid-template-columns: 1fr 108px; gap: 14px; align-items: end; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.5); background: rgba(239,242,250,.78); backdrop-filter: blur(26px); }
.map-region-summary div { min-width: 0; }
.map-region-summary strong, .map-region-summary small { display: block; }
.map-region-summary strong { margin: 6px 0; font-size: 14px; line-height: 1.45; }
.map-region-summary small { color: var(--muted); font-size: 11px; }
.summary-label { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.map-region-summary .primary { width: 108px; height: 48px; }

.city-backdrop { align-items: end; padding: 18px; }
.city-sheet { width: min(390px, 100%); padding: 10px 18px 22px; border: 1px solid rgba(255,255,255,.65); border-radius: 30px; background: rgba(241,244,252,.86); box-shadow: inset 0 1px 0 white, 0 32px 90px rgba(37,44,71,.3); backdrop-filter: blur(34px) saturate(1.25); animation: sheet-up .52s cubic-bezier(.16,1,.3,1) both; }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: rgba(72,82,115,.18); }
.city-sheet-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.city-sheet-head span { color: #6b7799; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.city-sheet-head h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.04em; }
.city-sheet-head button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(255,255,255,.58); font-size: 20px; cursor: pointer; }
.city-options { display: grid; gap: 10px; }
.city-option { width: 100%; min-height: 64px; padding: 0 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 18px; background: rgba(255,255,255,.4); display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 1px 0 white; font-size: 16px; font-weight: 760; cursor: pointer; }
.city-option.active { background: rgba(255,255,255,.68); box-shadow: inset 0 1px 0 white, 0 12px 28px rgba(64,75,111,.1); }
.city-option > span { display: grid; gap: 3px; text-align: left; }
.city-option small { color: var(--muted); font-size: 10px; font-weight: 560; }
.city-option b { width: 26px; height: 26px; border-radius: 50%; background: #52638f; color: white; display: grid; place-items: center; font-size: 13px; }
.city-option i { color: #7a83a0; font-size: 24px; font-style: normal; font-weight: 400; }
.coming-cities { display: flex; gap: 8px; margin-top: 13px; }
.coming-cities span { flex: 1; padding: 10px 0; border-radius: 13px; background: rgba(255,255,255,.28); color: #9a9eae; text-align: center; font-size: 12px; }
.city-sheet > p { margin: 11px 0 0; color: var(--muted); text-align: center; font-size: 10px; }

.thinking-layer { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 43%, rgba(215,224,248,.28), rgba(43,50,76,.48)); backdrop-filter: blur(18px); animation: backdrop-in .45s ease both; }
.thinking-stage { width: min(330px, calc(100% - 40px)); padding: 30px 24px 25px; text-align: center; border: 1px solid rgba(255,255,255,.42); border-radius: 34px; background: rgba(235,239,249,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 35px 90px rgba(33,40,67,.25); backdrop-filter: blur(32px) saturate(1.3); animation: thinking-rise .65s cubic-bezier(.16,1,.3,1) both; }
.thinking-stage p { margin: 21px 0 8px; color: #65739a; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.thinking-stage h2 { min-height: 52px; margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.04em; }
.thinking-stage small { display: block; margin: 9px auto 20px; max-width: 230px; color: var(--muted); line-height: 1.5; }
.thinking-halo { position: relative; width: 104px; height: 104px; margin: auto; display: grid; place-items: center; }
.thinking-halo span { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#b9c9ee 45%,#687cae); box-shadow: 0 0 32px rgba(116,139,194,.65); animation: breathe 2s ease-in-out infinite; }
.thinking-halo i { position: absolute; inset: 0; border: 1px solid rgba(97,119,172,.24); border-radius: 50%; animation: orbit 4.8s linear infinite; }
.thinking-halo i::after { content: ''; position: absolute; width: 7px; height: 7px; left: 8px; top: 16px; border-radius: 50%; background: #8396c5; box-shadow: 0 0 12px #8396c5; }
.thinking-halo i:nth-child(2) { inset: 12px; animation-duration: 3.6s; animation-direction: reverse; }.thinking-halo i:nth-child(3) { inset: 24px; animation-duration: 2.8s; }
.thinking-progress { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(71,84,125,.11); }
.thinking-progress b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8ea2d2,#596c9c); transition: width .6s cubic-bezier(.16,1,.3,1); }

.section-title { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 36px 0 14px; }
.section-title h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.section-title p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.region-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.region-mini { text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); cursor: pointer; transition: transform .2s ease, border .2s ease; }
.region-mini:hover { transform: translateY(-2px); }
.region-mini.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.region-mini strong { display: block; margin-bottom: 7px; }
.region-mini span { color: var(--muted); font-size: 13px; }

.plan-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding: 25px; border-radius: 24px; background: var(--green); color: white; }
.plan-hero h1 { font-size: clamp(28px, 6vw, 48px); }
.plan-hero p { color: rgba(255,255,255,.75); margin-bottom: 0; }
.plan-kicker { color: #c8f0d2 !important; }
.plan-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.plan-summary span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.82); font-size: 11px; font-weight: 650; }
.plan-actions { display: flex; gap: 9px; }
.plan-actions button { white-space: nowrap; min-height: 45px; padding: 0 16px; border: 0; border-radius: 13px; background: white; color: var(--ink); font-weight: 750; cursor: pointer; transition: transform .18s ease, opacity .18s ease; }
.plan-actions button:active { transform: scale(.97); }
.plan-actions button:disabled { opacity: .62; cursor: wait; }
.plan-actions .secondary { color: white; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); }
.route-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(400px,1.1fr); gap: 18px; margin-top: 18px; }
.route-list { padding: 10px 20px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.route-list-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 8px; }
.route-list-head span, .route-list-head strong { display: block; }
.route-list-head span { margin-bottom: 4px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.route-list-head strong { font-size: 14px; }
.route-list-head small { align-self: end; color: var(--muted); font-size: 10px; }
.route-step { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 13px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.route-step:last-child { border: 0; }
.route-step::before { content: ''; position: absolute; left: 25px; top: 48px; bottom: -25px; width: 1px; background: #ccd6cc; }
.route-step:last-child::before { display: none; }
.step-index { width: 38px; height: 38px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-weight: 800; z-index: 1; }
.step-main { min-width: 0; }
.step-main strong { display: block; margin: 3px 0 5px; line-height: 1.35; }
.step-main span { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.step-main .step-time { color: #59698f; font-weight: 700; }
.step-main .step-address { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.step-actions { display: grid; align-content: start; justify-items: end; gap: 5px; }
.step-actions button { min-height: 30px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: var(--green); display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 750; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.step-actions button:active { transform: scale(.95); background: rgba(82,99,143,.08); }
.step-actions button:disabled { opacity: .5; cursor: wait; }
.step-actions svg { width: 13px; height: 13px; }
.replace { color: var(--muted) !important; }
.route-map-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 24px; background: rgba(249,250,255,.46); box-shadow: 0 20px 54px rgba(47,57,84,.13); backdrop-filter: blur(26px); }
.route-map-card > header { height: 68px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(31,39,67,.08); background: rgba(249,250,255,.66); }
.route-map-card > header span, .route-map-card > header strong { display: block; }
.route-map-card > header div > span { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.route-map-card > header strong { font-size: 14px; }
.route-map-card > header button { min-height: 36px; padding: 0 11px; border: 1px solid rgba(82,99,143,.12); border-radius: 99px; background: rgba(255,255,255,.62); color: var(--green); display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; cursor: pointer; }
.route-map-card > header button:active { transform: scale(.96); }
.route-map-card > header button svg { width: 14px; height: 14px; }
.route-map { min-height: 330px; position: relative; overflow: hidden; background: #e4e7ef; }
#route-map { position: absolute; z-index: 1; inset: 0; }
.route-schematic { position: absolute; z-index: 0; inset: 0; padding: 48px 32px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 18% 14%,rgba(255,255,255,.86),transparent 34%), linear-gradient(145deg,#e9edf4,#d9dfeb); }
.route-schematic::before, .route-schematic::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(82,99,143,.09); }
.route-schematic::before { width: 190px; height: 190px; right: -55px; top: -45px; }
.route-schematic::after { width: 130px; height: 130px; left: -38px; bottom: -35px; }
.schematic-line { position: absolute; left: 48px; top: 70px; bottom: 70px; width: 2px; background: linear-gradient(#7c8fb7,#93a98e); }
.schematic-stop { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.schematic-stop b { width: 34px; height: 34px; flex: 0 0 auto; border: 5px solid rgba(255,255,255,.88); border-radius: 50%; background: #61739d; color: white; display: grid; place-items: center; box-shadow: 0 5px 18px rgba(51,63,95,.18); font-size: 10px; }
.schematic-stop span { max-width: 190px; overflow: hidden; color: #46516f; font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.route-map-status, .route-map-fallback { position: absolute; z-index: 3; inset: 0; padding: 28px; display: grid; place-content: center; justify-items: center; text-align: center; background: rgba(233,237,246,.78); backdrop-filter: blur(12px); transition: opacity .25s ease; }
.route-map-status.is-ready { opacity: 0; pointer-events: none; }
.route-map-status svg { width: 34px; height: 34px; margin-bottom: 12px; color: var(--green); }
.route-map-status strong, .route-map-fallback strong { margin-top: 13px; font-size: 15px; }
.route-map-status p, .route-map-fallback p { max-width: 230px; margin: 7px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.map-loader { width: 34px; height: 34px; border: 3px solid rgba(82,99,143,.16); border-top-color: #61739d; border-radius: 50%; animation: spin .8s linear infinite; }
.route-map-card.is-expanded { position: fixed; z-index: 70; left: 50%; top: 0; width: min(430px,100vw); height: 100dvh; display: flex; flex-direction: column; transform: translateX(-50%); border-radius: 0; background: var(--paper); animation: route-map-expand .6s cubic-bezier(.16,1,.3,1) both; }
.route-map-card.is-expanded .route-map { flex: 1; min-height: 0; }
.route-map-card.is-expanded > header { flex: 0 0 68px; padding-top: env(safe-area-inset-top); height: calc(68px + env(safe-area-inset-top)); }

.empty-card { padding: 34px; border: 1px dashed rgba(31,33,29,.18); border-radius: 24px; text-align: center; background: rgba(255,255,255,.4); }
.empty-card h2 { margin: 0 0 8px; }
.empty-card p { color: var(--muted); }

.bottom-nav { position: fixed; z-index: 30; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(286px, calc(100% - 64px)); height: 58px; padding: 6px; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(244,247,255,.52); backdrop-filter: blur(28px) saturate(1.3); border: 1px solid rgba(255,255,255,.56); border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 18px 48px rgba(50,60,93,.18); }
.nav-btn { border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; display: grid; place-items: center; gap: 1px; transition: transform .25s ease, background .25s ease; }
.nav-btn.active { color: #2f3954; background: rgba(255,255,255,.68); box-shadow: 0 4px 16px rgba(47,57,84,.1), inset 0 1px 0 white; }
.nav-btn:active { transform: scale(.94); }

.assistant-dock { display: flex; align-items: center; gap: 10px; margin: -7px 10px 0; padding: 10px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.66); backdrop-filter: blur(20px); }
.assistant-dock strong, .assistant-dock span { display: block; }
.assistant-dock strong { font-size: 11px; }
.assistant-dock span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.thinking-signal { width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; background: rgba(214,222,244,.8); }
.thinking-signal i { width: 3px; height: 9px; border-radius: 3px; background: #6578aa; animation: wave 1.2s ease-in-out infinite; }
.thinking-signal i:nth-child(2) { animation-delay: -.25s; }.thinking-signal i:nth-child(3) { animation-delay: -.5s; }
.nav-btn svg { width: 20px; height: 20px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; padding: 18px; display: grid; place-items: center; background: rgba(16,18,15,.48); backdrop-filter: blur(5px); }
.modal { width: min(480px,100%); max-height: 88dvh; overflow: auto; padding: 25px; border-radius: 25px; background: var(--card); box-shadow: 0 30px 90px rgba(0,0,0,.24); }
.modal h2 { margin: 0; font-size: 25px; }
.modal .intro { color: var(--muted); font-size: 14px; line-height: 1.6; }
.field { display: grid; gap: 7px; margin: 17px 0; }
.field span { font-size: 13px; font-weight: 750; }
.field input { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: white; outline: none; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,108,74,.12); }
.privacy { padding: 12px; border-radius: 12px; background: #f1eee6; color: var(--muted); font-size: 12px; line-height: 1.5; }
.modal-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; margin-top: 18px; }
.modal-actions button { min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: white; font-weight: 750; cursor: pointer; }
.modal-actions .save { color: white; background: var(--green); border-color: var(--green); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 96px; transform: translate(-50%, 20px); padding: 11px 16px; border-radius: 12px; color: white; background: rgba(26,29,24,.92); font-size: 13px; opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.spinner { width: 19px; height: 19px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; margin-right: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes drift { from { transform: translate3d(-8px,-5px,0) scale(.94); } to { transform: translate3d(12px,10px,0) scale(1.08); } }
@keyframes wave { 0%,100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes thinking-rise { from { opacity: 0; transform: translateY(80px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes map-expand { from { opacity: 0; clip-path: circle(25px at 27% 80%); transform: scale(.72); border-radius: 50%; } to { opacity: 1; clip-path: circle(150% at 27% 80%); transform: scale(1); border-radius: 0; } }
@keyframes route-map-expand { from { opacity: 0; clip-path: circle(25px at 80% 8%); transform: translateX(-50%) scale(.72); border-radius: 32px; } to { opacity: 1; clip-path: circle(150% at 80% 8%); transform: translateX(-50%) scale(1); border-radius: 0; } }
@keyframes map-collapse { from { opacity: 1; clip-path: circle(150% at 27% 80%); transform: scale(1); } to { opacity: 0; clip-path: circle(25px at 27% 80%); transform: scale(.72); border-radius: 50%; } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(70px) scale(.96); } to { opacity: 1; transform: none; } }

::view-transition-old(root) { animation: .34s ease both fade-out; }
::view-transition-new(root) { animation: .52s cubic-bezier(.16,1,.3,1) both page-in; }
@keyframes fade-out { to { opacity: 0; transform: scale(.96); filter: blur(8px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(8px); } }

/* Secondary screens share the same translucent OS material. */
.plan-hero { border: 1px solid rgba(255,255,255,.52); background: linear-gradient(145deg,rgba(68,82,123,.88),rgba(37,45,72,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px rgba(47,57,84,.2); view-transition-name: plan-hero; }
.route-list { border-color: rgba(255,255,255,.52); background: rgba(249,250,255,.46); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 20px 54px rgba(47,57,84,.09); backdrop-filter: blur(26px); }
.route-map { border: 1px solid rgba(255,255,255,.55); box-shadow: 0 20px 54px rgba(47,57,84,.13); }
.region-mini { border-color: rgba(255,255,255,.52); background: rgba(249,250,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 16px 42px rgba(47,57,84,.08); backdrop-filter: blur(24px); }
.empty-card { border-color: rgba(255,255,255,.55); background: rgba(249,250,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(22px); }
.modal { border: 1px solid rgba(255,255,255,.6); background: rgba(241,244,252,.78); box-shadow: inset 0 1px 0 white, 0 30px 90px rgba(37,44,71,.28); backdrop-filter: blur(34px) saturate(1.25); }

@media (max-width: 760px) {
  .topbar { height: 60px; padding-inline: 18px; }
  .main { padding: 20px 14px 104px; }
  .discover-main { padding-top: 12px; }
  .interest-row { gap: 7px; padding-bottom: 8px; }
  .chip { min-height: 38px; padding-inline: 14px; font-size: 13px; }
  .recommendation-stack { height: 500px; }
  .recommendation-stack .card-content { padding: 20px; }
  .discover-grid, .route-layout { grid-template-columns: 1fr; }
  .recommendation { min-height: 515px; }
  .map-panel { min-height: 330px; }
  .region-list { grid-template-columns: 1fr; }
  .plan-hero { grid-template-columns: 1fr; padding: 22px; }
  .plan-actions { width: 100%; }
  .plan-actions button { flex: 1; }
  .route-map { min-height: 400px; }
  .route-step { grid-template-columns: 44px 1fr auto; }
}

/* 桌面评审时固定为手机画布，真实手机仍使用上面的全屏布局。 */
@media (min-width: 761px) {
  body {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #dedbd3;
  }

  .app-shell {
    position: relative;
    width: 390px;
    height: min(844px, calc(100dvh - 40px));
    min-height: 640px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(31, 33, 29, .16);
    border-radius: 32px;
    background: var(--paper);
    box-shadow: 0 28px 80px rgba(37, 34, 28, .24);
    scrollbar-width: none;
  }

  .app-shell::-webkit-scrollbar { display: none; }
  .topbar { height: 60px; padding-inline: 18px; }
  .main { width: 100%; padding: 20px 14px 104px; }
  h1 { font-size: 38px; }
  .discover-grid, .route-layout { grid-template-columns: 1fr; }
  .recommendation { min-height: 515px; }
  .map-panel { min-height: 330px; }
  .region-list { grid-template-columns: 1fr; }
  .plan-hero { grid-template-columns: 1fr; padding: 22px; }
  .plan-hero h1 { font-size: 34px; }
  .plan-actions { width: 100%; }
  .plan-actions button { flex: 1; }
  .route-map { min-height: 400px; }
  .route-step { grid-template-columns: 44px 1fr auto; }
  .bottom-nav { width: 362px; bottom: max(28px, calc((100dvh - min(844px, calc(100dvh - 40px))) / 2 + 14px)); }
  .modal-backdrop { padding-inline: calc((100vw - 370px) / 2); }
  .modal { width: 354px; }
  .map-view { width: 390px; height: min(844px, calc(100dvh - 40px)); border: 1px solid rgba(31,33,29,.16); border-radius: 32px; box-shadow: 0 28px 80px rgba(37,34,28,.24); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; } }