:root {
  color-scheme: light;
  --ink: #152033;
  --muted: #6f7887;
  --paper: #f6f2ea;
  --panel: #fffdfa;
  --line: rgba(27, 39, 58, .12);
  --night: #101826;
  --night-soft: #1a2740;
  --visited: #ff6f91;
  --wish: #ffd166;
  --warm: #d5a65a;
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #f1eee9; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: radial-gradient(ellipse at 8% 8%, rgba(238,196,143,.25), transparent 34%), radial-gradient(ellipse at 88% 24%, rgba(144,171,205,.22), transparent 30%), radial-gradient(ellipse at 45% 100%, rgba(190,166,204,.18), transparent 38%), linear-gradient(155deg, #f8f4ec 0%, #eff3f6 54%, #f5efe9 100%); background-attachment: fixed; }
body::before { content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none; opacity: .58; background-image: radial-gradient(circle at 8% 18%, rgba(112,126,150,.75) 0 .7px, transparent 1.5px), radial-gradient(circle at 77% 9%, rgba(206,160,88,.8) 0 1px, transparent 2px), radial-gradient(circle at 64% 64%, rgba(107,125,151,.6) 0 .8px, transparent 1.7px), radial-gradient(circle at 22% 78%, rgba(211,170,103,.68) 0 .8px, transparent 1.6px), radial-gradient(circle at 92% 82%, rgba(122,105,153,.52) 0 .7px, transparent 1.5px); background-size: 193px 173px, 317px 281px, 263px 239px, 367px 331px, 421px 383px; }
body::before { animation: sky-drift 46s linear infinite alternate, sky-twinkle 5.5s ease-in-out infinite alternate; }
@keyframes sky-drift { to { transform: translate3d(-18px, 12px, 0); } }
@keyframes sky-twinkle { 0% { opacity: .42; } 55% { opacity: .64; } 100% { opacity: .5; } }
body::after { content: ""; position: fixed; z-index: 0; top: 92px; right: clamp(18px, 4vw, 58px); width: 64px; height: 64px; pointer-events: none; opacity: .68; border-radius: 50%; background: radial-gradient(circle at 62% 24%, rgba(164,145,118,.28) 0 5%, transparent 6%), radial-gradient(circle at 32% 67%, rgba(158,139,112,.25) 0 8%, transparent 9%), radial-gradient(circle at 70% 71%, rgba(160,141,115,.2) 0 4%, transparent 5%), radial-gradient(circle at 36% 33%, #fffbed, #ead9b5 72%, #c9ad7d); box-shadow: inset -10px -8px 14px rgba(112,91,65,.18), inset 5px 5px 9px rgba(255,255,255,.72), 0 0 24px rgba(231,198,126,.24), 0 0 60px rgba(231,198,126,.12); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { position: relative; z-index: 1; min-height: 100vh; }
.topbar { position: sticky; z-index: 25; top: 12px; max-width: 1240px; height: 64px; margin: 12px auto 0; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(250,248,243,.72); box-shadow: 0 10px 35px rgba(44,52,66,.07); backdrop-filter: blur(20px) saturate(1.25); }
.topbar::after { content: "✦"; position: absolute; right: 5px; bottom: -8px; color: rgba(213,166,90,.45); font-size: 12px; }
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; }
.brand-orbit { width: 30px; height: 30px; display: block; border: 1px solid rgba(47,119,208,.55); border-radius: 50%; position: relative; }
.brand-orbit::before { content: ""; width: 6px; height: 6px; position: absolute; right: -2px; top: 5px; border-radius: 50%; background: var(--warm); }
.brand-orbit::after { content: ""; position: absolute; width: 12px; height: 12px; right: 4px; top: 6px; border-radius: 50%; box-shadow: -4px 1px 0 rgba(155,92,196,.28); }
.desktop-nav { height: 44px; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 15px; background: rgba(21,32,51,.045); }
.nav-item { border: 0; border-radius: 11px; background: transparent; color: var(--muted); padding: 9px 15px; transition: color .25s ease, background .25s ease, transform .25s ease; }
.nav-item:hover { color: var(--ink); transform: translateY(-1px); }
.nav-item.active { color: var(--ink); border-color: transparent; background: rgba(255,255,255,.78); box-shadow: 0 4px 14px rgba(25,34,48,.07); }
.private-chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(47,119,208,.09); color: var(--ink); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.language-toggle { height: 34px; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid rgba(31,48,76,.1); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.5); font-size: 11px; transition: background .2s ease, color .2s ease; }
.language-toggle i { width: 1px; height: 12px; background: currentColor; opacity: .24; }
.language-toggle [data-language-label="zh"] { color: var(--ink); font-weight: 750; }
.language-toggle.english [data-language-label="zh"] { color: inherit; font-weight: 400; }
.language-toggle.english [data-language-label="en"] { color: var(--ink); font-weight: 750; }
.mobile-nav { display: none; }
main { max-width: 1280px; margin: 0 auto; padding: 46px 24px 90px; }
.page { display: none; transform-origin: 50% 0; }
.page.active { display: block; animation: page-arrive .5s cubic-bezier(.22,.8,.25,1) both; }
@keyframes page-arrive { from { opacity: 0; transform: translateY(12px) scale(.995); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
::view-transition-old(root) { animation: page-fade-out .22s ease both; }
::view-transition-new(root) { animation: page-fade-in .48s cubic-bezier(.22,.8,.25,1) both; }
@keyframes page-fade-out { to { opacity: 0; transform: translateY(-7px) scale(.995); } }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(12px) scale(.995); } }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); gap: 12px; align-items: start; }
.weather-card { position: relative; min-height: 500px; padding: clamp(28px, 5vw, 58px); overflow: hidden; border-radius: 42px 42px 14px 42px; background: linear-gradient(128deg, rgba(255,248,230,.96), rgba(255,255,255,.8) 57%, rgba(225,235,244,.86)); border: 0; box-shadow: 0 35px 90px rgba(44,42,34,.09); }
.weather-card::before { content: ""; position: absolute; width: 230px; height: 230px; right: -76px; bottom: -88px; border-radius: 50%; border: 1px solid rgba(93,118,148,.16); box-shadow: 0 0 0 38px rgba(93,118,148,.035), 0 0 0 76px rgba(93,118,148,.025); pointer-events: none; }
.weather-card::after, .wish-grid article::after, .profile-stats article::after { content: "✦"; position: absolute; top: 16px; right: 18px; color: rgba(213,166,90,.28); font-size: 13px; pointer-events: none; }
.scene-emojis { position: absolute; z-index: 2; right: 42px; bottom: 34px; display: flex; align-items: center; gap: 9px; color: rgba(31,48,76,.74); }
.scene-emojis span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(255,255,255,.52); box-shadow: 0 8px 24px rgba(27,40,62,.08); backdrop-filter: blur(8px); animation: emoji-float 4s ease-in-out infinite; }
.scene-emojis span:nth-child(2) { animation-delay: -1.2s; }
.scene-emojis span:nth-child(3) { animation-delay: -2.4s; }
@keyframes emoji-float { 50% { transform: translateY(-5px) rotate(3deg); } }
.weather-topline { display: flex; justify-content: space-between; align-items: center; }
.city-button { border: 0; background: transparent; padding: 0; color: var(--ink); font-weight: 700; }
.local-time, .subtle, .page-heading p, .visit-meta { color: var(--muted); }
.weather-main { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin: 34px 0 28px; }
.weather-symbol { font-size: 46px; }
.weather-temp { font-size: clamp(74px, 12vw, 118px); line-height: .9; letter-spacing: -6px; font-weight: 300; }
.weather-main p { color: var(--muted); }
.weather-details { width: min(315px, 100%); margin: 0; padding-left: 22px; border: 0; border-left: 1px solid rgba(21,32,51,.14); border-radius: 0; overflow: visible; background: transparent; }
.weather-details div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(21,32,51,.09); }
.weather-details div:last-child { border: 0; }
.weather-details dt { color: var(--muted); }
.weather-details dd { margin: 0; font-weight: 650; white-space: nowrap; }
.warm-line { max-width: 670px; font-size: clamp(17px, 2.3vw, 21px); line-height: 1.7; }
.primary-button { border: 0; border-radius: 999px; padding: 12px 19px; background: var(--ink); color: white; font-weight: 650; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,32,51,.18); background: #24334b; }
.welcome-side { position: relative; min-height: 460px; margin-top: 34px; padding: clamp(28px, 5vw, 48px); overflow: hidden; border-radius: 14px 42px 42px 42px; color: #f6f7fb; background: radial-gradient(circle at 78% 9%, #2b3e60, transparent 35%), linear-gradient(155deg, #17243a, #0b111c); box-shadow: 0 30px 75px rgba(14,24,40,.17); }
.welcome-side::after { content: ""; position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.2px); background-size: 54px 54px; pointer-events: none; }
.welcome-side > * { position: relative; z-index: 1; }
.welcome-side h1 { margin: 18px 0; font-size: clamp(31px, 4.6vw, 52px); line-height: 1.22; }
.welcome-side .subtle { color: rgba(246,247,251,.68); line-height: 1.7; }
.moon-detail { width: 66px; height: 66px; margin: -8px 0 10px auto; border-radius: 50%; background: radial-gradient(circle at 62% 23%, rgba(143,124,98,.32) 0 5%, transparent 6%), radial-gradient(circle at 29% 65%, rgba(133,114,90,.27) 0 8%, transparent 9%), radial-gradient(circle at 72% 70%, rgba(145,125,96,.22) 0 4%, transparent 5%), radial-gradient(circle at 34% 30%, #fffbed, #ead9b5 72%, #c4a873); box-shadow: inset -11px -9px 15px rgba(82,66,47,.22), inset 6px 5px 10px rgba(255,255,255,.56), 0 0 24px rgba(255,216,137,.22), 0 0 58px rgba(255,216,137,.12); }
.moon-detail::before, .moon-detail::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.moon-detail::before { inset: 0; background: radial-gradient(circle at 27% 32%, rgba(105,86,63,.26) 0 3px, rgba(255,255,255,.13) 3.5px 5px, transparent 5.5px), radial-gradient(circle at 66% 57%, rgba(107,87,63,.22) 0 5px, rgba(255,255,255,.1) 5.5px 7px, transparent 7.5px), radial-gradient(circle at 42% 78%, rgba(102,81,57,.19) 0 2.5px, transparent 3px), radial-gradient(ellipse at 70% 27%, rgba(255,255,255,.24), transparent 20%); mix-blend-mode: multiply; }
.moon-detail::after { inset: -9px; border: 1px solid rgba(255,226,166,.11); box-shadow: 0 0 0 7px rgba(255,218,143,.025), 0 0 30px rgba(255,218,143,.13); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: absolute; left: clamp(28px, 5vw, 48px); right: clamp(28px, 5vw, 48px); bottom: 40px; }
.mini-stats div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.mini-stats strong { font-size: 28px; }
.mini-stats span { color: rgba(246,247,251,.64); font-size: 13px; }
.eyebrow { margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 11px; }
.forecast-block { margin: 60px 3vw 0; }
.section-heading, .page-heading, .map-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-heading h2, .page-heading h1, .map-header h1 { margin: 0; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.forecast-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.forecast-list article { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 22px 6px; border-bottom: 1px solid var(--line); }
.forecast-list article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.map-header { margin-bottom: 18px; }
.map-search { width: min(440px, 100%); display: flex; gap: 8px; }
.map-search-box { position: relative; min-width: 0; flex: 1; }
.map-search input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.city-search-results { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: min(330px, 48vh); overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,250,.98); box-shadow: 0 18px 46px rgba(9,14,24,.22); backdrop-filter: blur(18px); }
.city-search-results[hidden] { display: none; }
.city-search-option { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; padding: 10px 11px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.city-search-option:hover, .city-search-option:focus-visible { outline: none; background: rgba(85,96,119,.1); }
.city-search-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.city-search-option span { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.city-search-option small { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.city-search-message { margin: 0; padding: 12px; color: var(--muted); font-size: 12px; text-align: center; }
.map-search button, .action-buttons > button, .map-error button, dialog button { padding: 11px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); }
.map-stage { position: relative; min-height: 680px; border-radius: 42px 14px 42px 14px; overflow: hidden; background: var(--night); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 35px 85px rgba(16,24,38,.16); }
.map-stage::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .68; background-image: radial-gradient(circle at 6% 12%, #fff 0 .8px, transparent 1.7px), radial-gradient(circle at 82% 17%, rgba(255,226,170,.95) 0 1.2px, transparent 2.2px), radial-gradient(circle at 17% 76%, rgba(203,221,255,.9) 0 .8px, transparent 1.8px), radial-gradient(circle at 91% 64%, #fff 0 .7px, transparent 1.6px); background-size: 181px 157px, 293px 251px, 239px 211px, 347px 319px; -webkit-mask-image: radial-gradient(circle at center, transparent 0 43%, rgba(0,0,0,.08) 54%, #000 73%); mask-image: radial-gradient(circle at center, transparent 0 43%, rgba(0,0,0,.08) 54%, #000 73%); }
.map-stage::after { content: ""; position: absolute; z-index: 3; top: 26px; left: 26px; width: 48px; height: 48px; pointer-events: none; opacity: .82; border-radius: 50%; background: radial-gradient(circle at 66% 28%, rgba(126,107,83,.3) 0 5%, transparent 6%), radial-gradient(circle at 33% 68%, rgba(126,107,83,.22) 0 8%, transparent 9%), radial-gradient(circle at 35% 30%, #fffbed, #e7d5ad 72%, #bfa270); box-shadow: inset -8px -7px 12px rgba(63,49,35,.25), inset 4px 4px 8px rgba(255,255,255,.52), 0 0 26px rgba(255,213,126,.25); }
.map-stage::before, .map-stage::after, .map-space-objects { transition: opacity .48s ease, visibility .48s ease; }
.map-stage.map-near-surface::before, .map-stage.map-near-surface::after, .map-stage.map-near-surface .map-space-objects { opacity: .16 !important; }
.map-stage.map-surface-view::before, .map-stage.map-surface-view::after, .map-stage.map-surface-view .map-space-objects { visibility: hidden; opacity: 0 !important; }
#map { position: absolute; inset: 0; }
.map-loading, .map-error { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: white; background: var(--night); }
.map-loading span { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.18); border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; }
.map-error[hidden], .map-loading[hidden] { display: none; }
.map-error span { max-width: 360px; color: rgba(255,255,255,.66); }
.map-error button { margin-top: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-status { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.map-status > span { padding: 8px 11px; border-radius: 999px; color: white; background: rgba(9,14,24,.72); backdrop-filter: blur(10px); font-size: 12px; }
.legend { display: flex; align-items: center; gap: 6px; }
.dot { width: 11px; height: 11px; display: inline-block; border-radius: 50%; }
.dot.visited { background: #fff5f7; border: 2px solid var(--visited); box-shadow: 0 0 5px var(--visited), 0 0 12px rgba(255,111,145,.88); }
.dot.wish { margin-left: 9px; background: #fff8dc; border: 2px solid var(--wish); box-shadow: 0 0 5px var(--wish), 0 0 12px rgba(255,209,102,.86); }
.travel-marker { width: auto; min-width: 15px; min-height: 15px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.travel-marker i { position: relative; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #fff8fa; background: radial-gradient(circle, #fff 0 18%, var(--visited) 22% 62%, rgba(255,111,145,.28) 66%); box-shadow: 0 0 0 4px rgba(255,111,145,.18), 0 0 12px 4px rgba(255,111,145,.86), 0 0 28px 8px rgba(255,111,145,.44); animation: marker-glow-visited 2.5s ease-in-out infinite; }
.travel-marker.wish i { border-color: #fff8dc; background: radial-gradient(circle, #fff 0 16%, var(--wish) 20% 46%, transparent 50%); box-shadow: 0 0 0 4px rgba(255,209,102,.14), 0 0 12px 4px rgba(255,209,102,.84), 0 0 27px 7px rgba(255,209,102,.38); animation-name: marker-glow-wish; }
.search-location-marker { position: relative; display: grid; place-items: center; pointer-events: none; }
.search-location-marker i { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; background: #f6c76d; box-shadow: 0 0 0 5px rgba(246,199,109,.18), 0 0 22px 7px rgba(246,199,109,.6); }
.search-location-marker span { position: absolute; top: 15px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(8,12,24,.76); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 7px 20px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
.travel-marker:hover i, .travel-marker:focus i { transform: scale(1.22); }
@keyframes marker-glow-visited { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,111,145,.16), 0 0 10px 3px rgba(255,111,145,.75), 0 0 24px 7px rgba(255,111,145,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,111,145,.08), 0 0 16px 5px rgba(255,111,145,.95), 0 0 34px 10px rgba(255,111,145,.5); } }
@keyframes marker-glow-wish { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,209,102,.13), 0 0 10px 3px rgba(255,209,102,.72), 0 0 24px 7px rgba(255,209,102,.3); } 50% { box-shadow: 0 0 0 6px rgba(255,209,102,.07), 0 0 16px 5px rgba(255,209,102,.96), 0 0 34px 10px rgba(255,209,102,.48); } }
.travel-marker span { display: none; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.88); font-size: 12px; white-space: nowrap; }
.travel-marker:hover span, .travel-marker:focus span { display: block; }
.city-action-card { position: absolute; z-index: 7; left: 50%; bottom: 58px; transform: translateX(-50%); width: min(390px, calc(100% - 28px)); padding: 13px 15px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 16px; background: rgba(255,253,250,.95); box-shadow: 0 18px 50px rgba(9,14,24,.26); }
.city-action-card[hidden] { display: none; }
.city-action-card > div:first-child { display: grid; gap: 2px; }
.city-action-card span { color: var(--muted); font-size: 12px; }
.action-buttons { display: flex; gap: 7px; }
.action-buttons .primary-button { background: var(--ink); color: white; }
.city-drawer { position: absolute; z-index: 9; top: 116px; right: 42px; width: min(360px, calc(100% - 84px)); padding: 22px; border-radius: 20px; background: rgba(255,253,250,.97); box-shadow: 0 22px 70px rgba(9,14,24,.32); }
.city-drawer[hidden] { display: none; }
.drawer-header { display: flex; justify-content: space-between; align-items: start; }
.drawer-header h2 { margin: 0; font-size: 30px; }
.icon-button { width: 38px; height: 38px; padding: 0 !important; display: grid; place-items: center; font-size: 22px; }
.memory-copy { padding-left: 13px; border-left: 2px solid var(--warm); line-height: 1.65; }
.photo-placeholder-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 115px 80px; gap: 7px; margin: 20px 0; }
.photo-placeholder-grid div { display: flex; align-items: end; padding: 10px; border-radius: 12px; color: white; font-size: 12px; background: linear-gradient(145deg, #7289a8, #364d70); }
.photo-placeholder-grid div:first-child { grid-row: 1 / 3; background: linear-gradient(145deg, #d2a05e, #6e7891); }
.photo-placeholder-grid.has-photos div { padding: 0; overflow: hidden; background: #dce2e9; }
.photo-placeholder-grid.has-photos img { width: 100%; height: 100%; display: block; object-fit: cover; }
.full-button { width: 100%; }
.city-album-view { position: fixed; z-index: 22; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 104px max(20px, env(safe-area-inset-right)) max(94px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); color: #f8f3ee; background: radial-gradient(circle at 78% 12%, rgba(146,105,179,.24), transparent 27%), radial-gradient(circle at 12% 45%, rgba(72,119,165,.22), transparent 31%), linear-gradient(155deg, #0b1020, #121b30 54%, #171426); opacity: 0; transform: translateY(18px) scale(.995); transition: opacity .34s ease, transform .52s cubic-bezier(.22,.8,.25,1); }
.city-album-view[hidden] { display: none; }
.city-album-view.active { opacity: 1; transform: none; }
body.album-open { overflow: hidden; }
.album-cosmos { position: fixed; inset: 0; pointer-events: none; opacity: .72; background-image: radial-gradient(circle, rgba(255,255,255,.88) 0 .7px, transparent 1.5px), radial-gradient(circle, rgba(239,198,126,.7) 0 .9px, transparent 1.8px), radial-gradient(circle, rgba(169,195,242,.68) 0 .6px, transparent 1.4px); background-size: 139px 127px, 257px 229px, 331px 307px; }
.album-cosmos::before { content: ""; position: absolute; right: 7%; top: 12%; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7dd, #ddc99f 70%, #9d835d); box-shadow: inset -14px -10px 20px rgba(62,48,40,.3), 0 0 36px rgba(246,211,139,.18); opacity: .75; }
.album-cosmos i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; animation: album-star 4s ease-in-out infinite alternate; }
.album-cosmos i:nth-child(1) { left: 9%; top: 18%; }
.album-cosmos i:nth-child(2) { left: 63%; top: 28%; animation-delay: -1.3s; }
.album-cosmos i:nth-child(3) { right: 14%; top: 52%; animation-delay: -2.4s; }
.album-cosmos span { position: absolute; left: 5%; top: 52%; opacity: .28; font-size: 30px; }
@keyframes album-star { to { opacity: .35; transform: scale(.72); } }
.album-shell { position: relative; width: min(1160px, 100%); margin: 0 auto; }
.album-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.album-back, .album-actions button, .album-actions label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.06); backdrop-filter: blur(15px); cursor: pointer; }
.album-back:hover, .album-actions button:hover { background: rgba(255,255,255,.11); }
.album-actions { display: flex; gap: 8px; }
.album-actions .primary-button { border-color: transparent; color: #171425; background: linear-gradient(135deg, #f2d9b3, #f3b8cf); font-weight: 750; }
.album-hero { position: relative; min-height: 310px; display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 16px 30px; padding: clamp(30px,6vw,72px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 36px 36px 12px 36px; background: radial-gradient(circle at 82% 20%, rgba(240,191,213,.21), transparent 25%), linear-gradient(135deg, rgba(43,58,92,.88), rgba(82,55,90,.72)); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.album-hero::before { content: ""; position: absolute; width: 280px; height: 280px; right: -86px; top: -100px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018); }
.album-hero h1 { position: relative; margin: 2px 0 0; font-size: clamp(52px,9vw,112px); line-height: .92; letter-spacing: -.055em; }
.album-hero .eyebrow { position: relative; color: #f2c5d7; }
.album-meta { position: relative; display: grid; align-self: end; justify-items: end; gap: 5px; color: rgba(255,255,255,.64); }
.album-meta strong { color: #f5dbb6; font-size: 18px; }
.album-hero > p { position: relative; grid-column: 1 / -1; max-width: 700px; margin: 14px 0 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.75; }
.album-photos-section { padding: 54px 2px 40px; }
.album-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.album-section-heading h2 { margin: 2px 0 0; font-size: clamp(30px,4vw,48px); }
.album-section-heading > span { color: rgba(255,255,255,.52); }
.album-grid { columns: 3 270px; column-gap: 14px; min-height: 260px; }
.album-photo { position: relative; break-inside: avoid; margin: 0 0 14px; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: 0 18px 45px rgba(0,0,0,.2); cursor: zoom-in; }
.album-photo img { width: 100%; height: auto; min-height: 190px; max-height: 520px; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.22,.8,.25,1), filter .3s ease; }
.album-photo:hover img { transform: scale(1.025); filter: brightness(1.06); }
.album-photo figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 9px; overflow: hidden; border-radius: 9px; color: rgba(255,255,255,.82); background: rgba(7,9,17,.48); backdrop-filter: blur(9px); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity .25s ease; }
.album-photo:hover figcaption { opacity: 1; }
.album-empty { column-span: all; min-height: 270px; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 40px; border: 1px dashed rgba(255,255,255,.16); border-radius: 26px; color: rgba(255,255,255,.52); background: rgba(255,255,255,.035); text-align: center; }
.album-empty span { font-size: 40px; }
.album-empty strong { color: rgba(255,255,255,.84); font-size: 20px; }
.album-empty label { margin-top: 9px; padding: 10px 14px; border-radius: 11px; color: #171425; background: linear-gradient(135deg, #f2d9b3, #f3b8cf); font-weight: 750; cursor: pointer; }
.page-heading { margin-bottom: 25px; }
.welcome-page, .wishlist-page { position: relative; isolation: isolate; }
.welcome-page::before { content: ""; position: absolute; z-index: -1; inset: -42px -20px 20%; pointer-events: none; opacity: .54; background-image: radial-gradient(circle, rgba(87,106,135,.65) 0 .8px, transparent 1.7px), radial-gradient(circle, rgba(207,164,94,.65) 0 1px, transparent 2px); background-size: 143px 127px, 239px 211px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.welcome-page::after { content: ""; position: absolute; z-index: -1; top: -18px; right: 13%; width: 42px; height: 42px; border-radius: 50%; opacity: .38; background: #f4e6c8; box-shadow: inset -13px -3px 0 #e2e7ee, 0 0 28px rgba(213,166,90,.18); transform: rotate(-18deg); }
.wishlist-page { min-height: 680px; }
.wishlist-page::before { content: ""; position: absolute; z-index: -1; inset: -36px -30px -40px; border-radius: 50px; pointer-events: none; background: radial-gradient(circle at 84% 8%, rgba(74,91,133,.16), transparent 27%), radial-gradient(circle at 12% 42%, rgba(215,166,97,.12), transparent 29%), linear-gradient(145deg, rgba(255,253,248,.4), rgba(228,234,242,.34)); }
.wish-constellation { position: absolute; z-index: -1; top: 24px; right: 5%; width: 210px; height: 120px; opacity: .55; pointer-events: none; }
.wish-constellation::before, .wish-constellation::after { content: ""; position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(75,95,128,.36), transparent); transform-origin: left; }
.wish-constellation::before { top: 43px; left: 18px; width: 136px; transform: rotate(14deg); }
.wish-constellation::after { top: 70px; left: 66px; width: 100px; transform: rotate(-22deg); }
.wish-constellation i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d8a85d; box-shadow: 0 0 12px rgba(216,168,93,.42); }
.wish-constellation i:nth-child(1) { left: 18px; top: 40px; }
.wish-constellation i:nth-child(2) { left: 91px; top: 58px; }
.wish-constellation i:nth-child(3) { right: 39px; top: 34px; }
.wish-constellation span { position: absolute; right: 0; top: 5px; color: rgba(47,61,89,.72); font-size: 38px; }
.wish-heading { margin-bottom: 20px; }
.wish-overview { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; align-items: center; gap: 28px; margin-bottom: 38px; padding: 17px 20px; border-top: 1px solid rgba(32,47,70,.1); border-bottom: 1px solid rgba(32,47,70,.1); }
.wish-overview > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 9px; }
.wish-overview > div span { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.wish-overview strong { font-size: 30px; }
.wish-overview small { color: var(--muted); }
.wish-overview p { margin: 0; color: #586577; text-align: center; }
.wish-overview p span { margin-right: 7px; color: #d5a65a; }
.wish-overview button { padding: 9px 13px; border: 1px solid rgba(36,54,78,.12); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.5); }
.wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,3vw,38px); align-items: start; }
.wish-grid article { position: relative; padding: 0 0 16px; border: 0; border-bottom: 1px solid rgba(28,42,63,.1); background: transparent; }
.wish-grid article:nth-child(2) { margin-top: 42px; }
.wish-grid article:nth-child(3) { margin-top: 12px; }
.wish-grid h2 { margin: 2px 0 8px; font-size: 27px; }
.wish-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
.wish-card-top p { margin: 0; }
.wish-grid p, .wish-grid span { color: var(--muted); }
.wish-note { min-height: 46px; margin: 0; line-height: 1.55; font-size: 14px; }
.wish-actions { display: flex; gap: 8px; margin-top: 14px; }
.wish-actions button { padding: 7px 12px; border: 1px solid rgba(28,42,63,.12); border-radius: 999px; color: #465367; background: rgba(255,255,255,.55); transition: transform .2s ease, background .2s ease; }
.wish-actions button:hover { transform: translateY(-1px); background: white; }
.wish-actions button:last-child { color: #a45767; }
.wish-visual { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; border-radius: 38px 12px 38px 12px; color: rgba(255,255,255,.9); background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.24), transparent 18%), linear-gradient(145deg, #273b59, #829bb1); box-shadow: 0 20px 48px rgba(26,40,61,.14); }
.wish-visual::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.02); }
.wish-visual > span { position: relative; color: rgba(255,255,255,.9); font-size: 48px; text-shadow: 0 0 24px rgba(255,255,255,.35); }
.wish-visual small { position: absolute; right: 15px; bottom: 13px; color: rgba(255,255,255,.68); letter-spacing: .08em; }
.wish-grid article:nth-child(2) .wish-visual { border-radius: 12px 38px 12px 38px; }
.wish-visual.kyoto { background: radial-gradient(circle at 25% 28%, rgba(255,239,222,.25), transparent 20%), linear-gradient(145deg, #8a695e, #d1b59a); }
.wish-visual.sydney { background: radial-gradient(circle at 72% 20%, rgba(255,247,202,.4), transparent 18%), linear-gradient(145deg, #357b9d, #d9bf79); }
.wish-visual.violet { background: radial-gradient(circle at 72% 24%, rgba(255,222,244,.3), transparent 20%), linear-gradient(145deg, #5a4e7d, #bc8eaa); }
.wish-empty { grid-column: 1 / -1; padding: 70px 20px; color: var(--muted); text-align: center; }
.wish-empty span { font-size: 44px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.profile-stats article { position: relative; display: grid; gap: 8px; padding: 27px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.profile-stats span { color: var(--muted); }
.profile-stats strong { font-size: 34px; }
.settings-list { margin-top: 24px; border-top: 1px solid var(--line); }
.settings-list button { width: 100%; display: flex; justify-content: space-between; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); }
.settings-list span { color: var(--muted); }
.photos-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 24px; }
.photos-heading h1 { max-width: 760px; margin: 5px 0 10px; font-size: clamp(34px, 5vw, 64px); line-height: 1.08; letter-spacing: -.035em; }
.photos-heading p:last-child { max-width: 700px; color: var(--muted); line-height: 1.7; }
.heart-upload-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 1px solid rgba(255,97,151,.2); border-radius: 999px; color: #9d315b; background: rgba(255,240,246,.84); box-shadow: 0 12px 32px rgba(133,49,87,.08); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.heart-upload-button:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(133,49,87,.13); }
.heart-stage { position: relative; height: min(680px, 70vh); min-height: 520px; overflow: hidden; border-radius: 42px 14px 42px 14px; background: radial-gradient(circle at 50% 48%, rgba(97,35,79,.42), transparent 27%), radial-gradient(circle at 78% 12%, rgba(80,92,150,.28), transparent 28%), linear-gradient(148deg, #110d1d, #17152a 58%, #0b0d18); box-shadow: 0 36px 90px rgba(24,16,37,.2); isolation: isolate; }
.heart-stage::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .65; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 .7px, transparent 1.5px), radial-gradient(circle, rgba(255,194,222,.8) 0 .9px, transparent 1.8px), radial-gradient(circle, rgba(180,205,255,.7) 0 .6px, transparent 1.4px); background-size: 107px 101px, 181px 167px, 233px 211px; animation: heart-stars 28s linear infinite alternate; }
@keyframes heart-stars { to { transform: translate3d(-16px, 12px, 0); opacity: .84; } }
#heart-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#heart-canvas:active { cursor: grabbing; }
.heart-empty { position: absolute; z-index: 3; left: 50%; bottom: 9%; width: min(330px, 80%); display: grid; gap: 5px; transform: translateX(-50%); color: rgba(255,238,246,.84); text-align: center; pointer-events: none; }
.heart-empty[hidden] { display: none; }
.heart-empty > span { font-size: 22px; }
.heart-empty small { color: rgba(255,238,246,.54); line-height: 1.45; }
.heart-controls { position: absolute; z-index: 4; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.5); font-size: 12px; pointer-events: none; }
.heart-controls i { width: 3px; height: 3px; border-radius: 50%; background: #ff74aa; box-shadow: 0 0 9px #ff74aa; }
.heart-count { position: absolute; z-index: 4; top: 20px; right: 22px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(10,8,18,.28); backdrop-filter: blur(10px); font-size: 12px; }
.heart-zoom-controls { position: absolute; z-index: 5; right: 20px; bottom: 18px; display: flex; gap: 5px; padding: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(8,7,16,.4); backdrop-filter: blur(12px); }
.heart-zoom-controls button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: rgba(255,255,255,.8); background: transparent; font-size: 18px; transition: background .2s ease, transform .2s ease; }
.heart-zoom-controls button:hover { background: rgba(255,112,168,.16); transform: scale(1.05); }
dialog { width: min(560px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(9,14,24,.62); backdrop-filter: blur(4px); }
dialog form { display: grid; gap: 10px; padding: 24px; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 7px; }
.dialog-header h2 { margin: 0; }
dialog label { margin-top: 6px; font-weight: 650; }
dialog input, dialog textarea { padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }
.photo-upload { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px dashed rgba(47,72,105,.3); border-radius: 14px; background: linear-gradient(135deg, rgba(235,240,247,.72), rgba(255,250,240,.7)); cursor: pointer; }
.photo-upload:hover { border-color: rgba(47,72,105,.55); }
.photo-upload-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--night-soft); font-size: 22px; }
.photo-upload span:last-child { display: grid; gap: 3px; }
.photo-upload small { color: var(--muted); font-weight: 400; }
.edit-photo-preview { min-height: 54px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.edit-photo-preview > p { grid-column: 1 / -1; margin: 0; padding: 15px; border-radius: 12px; color: var(--muted); background: rgba(21,32,51,.04); text-align: center; font-size: 13px; }
.edit-photo-preview figure { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 11px; background: #e7e9ed; }
.edit-photo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.edit-photo-preview button { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: rgba(10,16,26,.72); }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 10px; }
.dialog-actions .primary-button { background: var(--ink); color: white; }
.dialog-action-spacer { flex: 1; }
.dialog-actions .danger-button { border-color: rgba(181,67,79,.2); color: #a73543; background: rgba(181,67,79,.07); }
.dialog-actions .danger-button:hover { background: rgba(181,67,79,.13); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; }

@media (max-width: 850px) {
  .desktop-nav, .private-chip { display: none; }
  .topbar { top: 8px; height: 62px; margin: 8px 10px 0; border-radius: 19px; }
  main { padding: 22px 14px 94px; }
  .mobile-nav { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); min-height: 58px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,250,.94); backdrop-filter: blur(16px); box-shadow: 0 14px 45px rgba(21,32,51,.17); overflow: hidden; }
  .mobile-nav .nav-item { border-bottom: 0; padding: 10px 3px; }
  .mobile-nav .nav-item.active { background: rgba(47,119,208,.09); }
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-side { min-height: 390px; margin-top: 0; }
  .map-stage { min-height: 610px; }
  .city-drawer { top: 104px; right: 28px; width: min(360px, calc(100% - 56px)); }
  .photos-heading { align-items: start; }
}

@media (max-width: 620px) {
  .weather-card { padding: 28px 20px; border-radius: 30px 30px 10px 30px; }
  .weather-main { display: grid; margin-top: 25px; }
  .weather-details { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(21,32,51,.14); }
  .weather-temp { font-size: 78px; }
  .section-heading, .page-heading, .map-header { display: grid; align-items: start; }
  .forecast-block { margin: 46px 4px 0; }
  .forecast-list { grid-template-columns: 1fr; }
  .forecast-list article { grid-template-columns: .7fr 1fr auto; }
  .forecast-list article + article { padding-left: 4px; border-left: 0; }
  .map-search { width: 100%; }
  .map-stage { min-height: 520px; border-radius: 30px 10px 30px 10px; }
  .map-status { left: 10px; right: 10px; bottom: 10px; }
  .city-drawer { position: absolute; top: auto; left: 10px; right: 10px; bottom: 64px; width: auto; max-height: 72%; overflow: auto; }
  .city-action-card { bottom: 55px; }
  .wish-grid, .profile-stats { grid-template-columns: 1fr; }
  .wish-grid article:nth-child(2), .wish-grid article:nth-child(3) { margin-top: 12px; }
  .scene-emojis { right: 18px; bottom: 20px; }
  .photos-heading { display: grid; gap: 14px; }
  .photos-heading h1 { font-size: 40px; }
  .heart-stage { min-height: 500px; height: 62vh; border-radius: 30px 10px 30px 10px; }
  .heart-controls { display: none; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-action-spacer { display: none; }
  .dialog-actions .danger-button { margin-right: auto; }
  .city-album-view { padding: 88px 14px 92px; }
  .album-toolbar { align-items: stretch; }
  .album-back, .album-actions button, .album-actions label { padding: 10px 11px; font-size: 13px; }
  .album-actions { margin-left: auto; }
  .album-hero { min-height: 280px; grid-template-columns: 1fr; padding: 28px 24px; border-radius: 28px 28px 10px 28px; }
  .album-hero h1 { font-size: clamp(54px,18vw,78px); }
  .album-meta { justify-items: start; }
  .album-hero > p { margin-top: 4px; }
  .album-photos-section { padding-top: 38px; }
  .album-section-heading { align-items: start; }
  .album-section-heading h2 { font-size: 30px; }
  .album-grid { columns: 2 145px; column-gap: 9px; }
  .album-photo { margin-bottom: 9px; border-radius: 13px; }
  .album-photo img { min-height: 130px; max-height: 360px; }
  body.lang-en .scene-emojis { top: 108px; right: 18px; bottom: auto; transform: scale(.78); transform-origin: top right; }
  body.lang-en #welcome-map-button { padding-inline: 15px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* 地图与照片页：取消卡片边界，让星空成为整个页面 */
body.space-page {
  color: #f7f2fa;
  background: radial-gradient(circle at 50% 46%, rgba(69,50,100,.2), transparent 34%), radial-gradient(circle at 12% 8%, rgba(35,67,110,.22), transparent 31%), linear-gradient(160deg, #070914 0%, #0d1020 48%, #080813 100%);
}
body.space-page::before {
  opacity: .86;
  background-image: radial-gradient(circle, rgba(255,255,255,.96) 0 .7px, transparent 1.45px), radial-gradient(circle, rgba(255,220,235,.88) 0 .9px, transparent 1.8px), radial-gradient(circle, rgba(190,214,255,.82) 0 .65px, transparent 1.45px), radial-gradient(circle, rgba(255,255,255,.55) 0 .45px, transparent 1.15px);
  background-size: 127px 113px, 223px 197px, 293px 267px, 83px 79px;
}
body.space-page::after { top: clamp(92px, 13vh, 142px); right: clamp(18px, 5vw, 72px); width: clamp(54px, 6vw, 82px); height: clamp(54px, 6vw, 82px); opacity: .9; }
body.map-near-surface::before, body.map-near-surface::after { opacity: .12 !important; animation: none; transition: opacity .48s ease; }
body.map-surface-mode::before, body.map-surface-mode::after { opacity: 0 !important; animation: none; transition: opacity .48s ease; }
body.space-page .topbar { border-color: rgba(255,255,255,.1); color: #fff; background: rgba(10,12,25,.58); box-shadow: 0 12px 45px rgba(0,0,0,.22); }
body.space-page .brand,
body.space-page .nav-item.active { color: #fff; }
body.space-page .desktop-nav { background: rgba(255,255,255,.055); }
body.space-page .nav-item { color: rgba(255,255,255,.58); }
body.space-page .nav-item:hover { color: #fff; }
body.space-page .nav-item.active { background: rgba(255,255,255,.1); box-shadow: none; }
body.space-page .private-chip { color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); }
body.space-page .language-toggle { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
body.space-page .language-toggle [data-language-label="zh"], body.space-page .language-toggle.english [data-language-label="en"] { color: #fff; }
body.space-page .language-toggle.english [data-language-label="zh"] { color: rgba(255,255,255,.5); }
body.space-page main { max-width: none; padding: 18px 0 0; }
body.space-page .map-page,
body.space-page .photos-page { position: relative; min-height: calc(100dvh - 94px); overflow: hidden; }
body.space-page .map-header,
body.space-page .photos-heading { position: absolute; z-index: 8; top: clamp(18px,3vw,38px); left: clamp(18px,4vw,62px); right: clamp(18px,4vw,62px); margin: 0; pointer-events: none; }
body.space-page .map-header > *,
body.space-page .photos-heading > * { pointer-events: auto; }
body.space-page .map-header h1,
body.space-page .photos-heading h1 { color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.42); }
body.space-page .map-header .eyebrow,
body.space-page .photos-heading .eyebrow { color: rgba(255,192,218,.76); }
body.space-page .photos-heading h1 { max-width: 680px; font-size: clamp(30px,4.4vw,58px); }
body.space-page .photos-heading p:last-child { color: rgba(239,234,246,.62); }
body.space-page .map-search { border-color: rgba(255,255,255,.11); background: rgba(12,14,29,.54); box-shadow: 0 14px 36px rgba(0,0,0,.2); backdrop-filter: blur(18px); }
body.space-page .map-search input {
  border-color: rgba(255,255,255,.12);
  color: #fff;
  background: rgba(7,9,20,.58);
  caret-color: #ff8fba;
}
body.space-page .map-search input:focus {
  border-color: rgba(255,143,186,.62);
  outline: 3px solid rgba(255,111,157,.13);
}
body.space-page .map-search input::placeholder { color: rgba(255,255,255,.45); }
body.space-page .city-search-results { border-color: rgba(255,255,255,.13); background: rgba(10,13,28,.94); box-shadow: 0 22px 50px rgba(0,0,0,.42); }
body.space-page .map-search .city-search-option { border: 0; background: transparent; color: #fff; }
body.space-page .city-search-option:hover, body.space-page .city-search-option:focus-visible { background: rgba(255,255,255,.09); }
body.space-page .city-search-option span, body.space-page .city-search-option small, body.space-page .city-search-message { color: rgba(255,255,255,.58); }
.map-stage,
.heart-stage { border: 0; border-radius: 0; box-shadow: none; }
body.space-page .map-stage,
body.space-page .heart-stage { height: calc(100dvh - 94px); min-height: 640px; background: transparent; }
body.space-page .map-stage::after { top: auto; right: auto; bottom: 8%; left: 7%; width: 32px; height: 32px; opacity: .42; }
body.space-page .heart-stage::before { opacity: .78; }
#heart-canvas { cursor: grab; }
#heart-canvas:active { cursor: grabbing; }
.heart-back,
.memory-caption { position: absolute; z-index: 6; border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.86); background: rgba(9,8,19,.34); box-shadow: 0 14px 38px rgba(0,0,0,.18); backdrop-filter: blur(14px); }
.heart-back { left: clamp(16px,3vw,38px); bottom: clamp(20px,4vw,42px); padding: 11px 16px; border-radius: 999px; transition: transform .25s ease, background .25s ease; }
.heart-back:hover { transform: translateY(-2px); background: rgba(255,100,156,.15); }
.memory-caption { left: 50%; bottom: clamp(18px,4vw,38px); display: grid; gap: 2px; min-width: 210px; padding: 10px 18px; border-radius: 18px; text-align: center; transform: translateX(-50%); pointer-events: none; }
.heart-back[hidden], .memory-caption[hidden] { display: none; }
.memory-caption span { color: rgba(255,255,255,.5); font-size: 11px; }
.photo-lightbox { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: clamp(18px,5vw,64px); background: rgba(4,5,12,.9); backdrop-filter: blur(18px); animation: lightbox-in .35s ease both; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox img { max-width: min(1120px,94vw); max-height: 88dvh; border-radius: 7px; box-shadow: 0 30px 90px rgba(0,0,0,.56); object-fit: contain; }
.photo-lightbox button { position: absolute; top: max(18px,env(safe-area-inset-top)); right: 20px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); font-size: 26px; }
@keyframes lightbox-in { from { opacity: 0; } }

@media (max-width: 700px) {
  body.space-page main { padding-top: 8px; padding-bottom: 0; }
  body.space-page .map-page,
  body.space-page .photos-page { min-height: calc(100dvh - 134px); }
  body.space-page .map-stage,
  body.space-page .heart-stage { height: calc(100dvh - 134px); min-height: 520px; }
  body.space-page .map-header,
  body.space-page .photos-heading { top: 16px; left: 14px; right: 14px; }
  body.space-page .map-header { gap: 10px; }
  body.space-page .map-header h1 { font-size: 27px; max-width: 78%; }
  body.space-page .photos-heading { display: flex; align-items: flex-start; gap: 12px; }
  body.space-page .photos-heading h1 { margin-top: 2px; max-width: 250px; font-size: 28px; }
  body.space-page .photos-heading p:last-child { display: none; }
  .heart-upload-button { padding: 10px 13px; font-size: 13px; white-space: nowrap; }
  .heart-count { top: auto; right: 14px; bottom: 18px; }
  .heart-empty { bottom: 12%; }
  .heart-back { bottom: 18px; }
  .memory-caption { bottom: 68px; }
  body.space-page .mobile-nav { border-color: rgba(255,255,255,.08); background: rgba(8,10,20,.88); }
  body.space-page .mobile-nav .nav-item { color: rgba(255,255,255,.48); }
  body.space-page .mobile-nav .nav-item.active { color: #fff; background: rgba(255,255,255,.08); }
  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .maplibregl-ctrl-attrib { max-width: 32px; overflow: hidden; white-space: nowrap; }
}

@media (max-width: 420px) {
  body.space-page .photos-heading h1 { max-width: 205px; font-size: 25px; }
  .heart-upload-button { padding: 9px 11px; }
  body.space-page::after { width: 46px; height: 46px; }
}

@media (max-width: 850px) {
  .wish-overview { grid-template-columns: auto 1fr; gap: 15px 20px; }
  .wish-overview p { text-align: left; }
  .wish-overview button { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .welcome-page::after { top: 4px; right: 9%; width: 34px; height: 34px; }
  .wish-constellation { top: 2px; right: 1%; transform: scale(.72); transform-origin: top right; }
  .wish-heading { gap: 16px; }
  .wish-heading .primary-button { justify-self: start; }
  .wish-overview { grid-template-columns: 1fr; padding: 15px 4px; }
  .wish-overview p { order: 3; line-height: 1.55; }
  .wish-overview button { grid-column: auto; justify-self: start; }
  .wish-grid article:nth-child(2), .wish-grid article:nth-child(3) { margin-top: 8px; }
  .wish-visual { height: 210px; }
  .wish-note { min-height: 0; }
}

/* 轻量宇宙层：丰富边缘，把视觉中心留给地球和爱心 */
.space-objects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.map-space-objects { z-index: 3; }
.photo-space-objects { z-index: 1; }
.heart-focus-glow { position: absolute; z-index: 1; left: 50%; top: 52%; width: min(620px,72vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .88; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,50,130,.13) 0 12%, rgba(113,35,91,.14) 28%, rgba(6,8,20,.72) 52%, transparent 72%); filter: blur(8px); }
body.space-page .heart-stage::before { opacity: .64; background-image: radial-gradient(circle, rgba(255,255,255,.86) 0 .65px, transparent 1.45px), radial-gradient(circle, rgba(255,218,158,.72) 0 .8px, transparent 1.7px), radial-gradient(circle, rgba(156,196,255,.78) 0 .6px, transparent 1.4px); -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 0 25%, rgba(0,0,0,.18) 38%, #000 58%); mask-image: radial-gradient(circle at 50% 52%, transparent 0 25%, rgba(0,0,0,.18) 38%, #000 58%); }
.cosmic-nebula { position: absolute; width: 340px; height: 210px; border-radius: 50%; opacity: .28; filter: blur(34px); transform: rotate(-18deg); background: radial-gradient(ellipse, rgba(105,87,182,.72), rgba(42,94,157,.35) 42%, transparent 72%); animation: nebula-breathe 12s ease-in-out infinite alternate; }
.cosmic-nebula.nebula-one { left: -120px; top: 22%; }
.cosmic-nebula.nebula-two { right: -130px; bottom: 4%; opacity: .22; transform: rotate(24deg); background: radial-gradient(ellipse, rgba(181,74,142,.58), rgba(55,69,150,.3) 48%, transparent 73%); animation-delay: -5s; }
.ringed-planet { position: absolute; left: 7%; bottom: 13%; width: 34px; height: 34px; border-radius: 50%; opacity: .7; transform: rotate(-18deg); background: radial-gradient(circle at 35% 28%, #f4ddb1, #9a7391 60%, #4d3c69); box-shadow: inset -7px -5px 10px rgba(18,16,39,.5), 0 0 20px rgba(211,165,191,.16); }
.ringed-planet::after { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 15px; border: 2px solid rgba(231,204,179,.54); border-left-color: rgba(152,124,170,.28); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 8px rgba(231,204,179,.12); }
.distant-planet { position: absolute; right: 9%; top: 34%; width: 18px; height: 18px; border-radius: 50%; opacity: .72; background: radial-gradient(circle at 32% 28%, #c6e4ff, #5975a2 62%, #28334d); box-shadow: 0 0 18px rgba(118,169,227,.25); }
.comet { position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: .75; background: #fff7df; box-shadow: 0 0 9px #fff, 0 0 20px rgba(164,205,255,.58); animation: comet-drift 8s ease-in-out infinite; }
.comet::after { content: ""; position: absolute; top: 2px; right: 1px; width: 84px; height: 1px; transform-origin: right; transform: rotate(-18deg); background: linear-gradient(90deg, transparent, rgba(179,214,255,.12), rgba(255,247,223,.68)); }
.comet-one { right: 16%; top: 20%; }
.comet-two { left: 18%; top: 68%; animation-delay: -4s; transform: scale(.72) rotate(180deg); }
.orbit-dust { position: absolute; right: 4%; bottom: 10%; width: 128px; height: 56px; border: 1px solid rgba(173,198,239,.13); border-radius: 50%; transform: rotate(-21deg); }
.orbit-dust::before, .orbit-dust::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe0a9; box-shadow: 0 0 9px rgba(255,224,169,.62); }
.orbit-dust::before { left: 13px; top: 8px; }
.orbit-dust::after { right: 17px; bottom: 7px; background: #a9ceff; }
.photo-space-objects .ringed-planet { left: 8%; bottom: 10%; transform: rotate(14deg) scale(.78); opacity: .58; }
.photo-space-objects .distant-planet { right: 11%; top: 42%; }
.photo-space-objects .orbit-dust { right: 7%; bottom: 8%; opacity: .7; }
.map-space-objects .cosmic-nebula { opacity: .17; }
.map-space-objects .ringed-planet { left: 7%; bottom: 9%; transform: rotate(-18deg) scale(.68); }
.map-space-objects .distant-planet { right: 8%; top: 43%; }
@keyframes nebula-breathe { to { opacity: .38; transform: rotate(-12deg) scale(1.08); } }
@keyframes comet-drift { 50% { transform: translate3d(-18px,7px,0); opacity: .95; } }

@media (max-width: 700px) {
  .heart-focus-glow { width: 108vw; opacity: .72; }
  .cosmic-nebula { width: 220px; height: 150px; filter: blur(28px); }
  .ringed-planet { left: 10%; bottom: 16%; transform: scale(.62) rotate(-18deg); }
  .distant-planet { right: 8%; top: 46%; transform: scale(.78); }
  .orbit-dust { display: none; }
  .comet-two { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-nebula, .comet { animation: none !important; }
}