:root {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: #26332b;
  background: #eeeae2;
  font-synthesis: none;
  --bg: #fbfaf6;
  --card: #fffefa;
  --green: #668169;
  --green-dark: #3f6048;
  --green-soft: #dfe8dc;
  --pink: #d9928d;
  --pink-soft: #f5dedb;
  --sand: #eee5d5;
  --line: #e8e1d6;
  --muted: #8c918b;
  --shadow: 0 8px 24px rgba(73, 67, 54, 0.09);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #eeeae2; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

.site-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background-image: url('./assets/flower-strip.jpg'); background-size: cover; background-position: center; }
.phone-app { width: 393px; height: 852px; max-height: calc(100vh - 32px); position: relative; overflow: hidden; background: var(--bg); border: 7px solid #595d5c; border-radius: 46px; box-shadow: 0 30px 80px rgba(39, 43, 39, 0.25); }
.status-safe { height: 18px; background: var(--bg); }
.screen-content { height: calc(100% - 18px); overflow-y: auto; scrollbar-width: none; padding-bottom: 84px; }
.screen-content::-webkit-scrollbar { display: none; }
.page { min-height: 100%; background: var(--bg); padding-bottom: 20px; }

.topbar { height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; position: sticky; top: 0; z-index: 20; background: rgba(251,250,246,.96); border-bottom: 1px solid rgba(232,225,214,.75); }
.topbar > :last-child { justify-self: end; }
.topbar strong { font-size: 16px; letter-spacing: .02em; }
.icon-button, .text-button, .round-add { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.icon-button { width: 36px; height: 36px; border-radius: 50%; }
.text-button { color: #59645c; font-size: 13px; }
.round-add { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); color: white; }
.quiet-label { font-size: 11px; color: var(--muted); }

.map-stage { height: 378px; position: relative; overflow: hidden; background: #e8eee6; }
.map-stage > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(.94) brightness(1.04); }
.map-tool { position: absolute; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(59,74,61,.13); }
.map-search { top: 14px; }
.map-layers { top: 62px; }
.map-locate { top: 110px; }
.map-add { position: absolute; right: 16px; bottom: 26px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: white; box-shadow: 0 10px 20px rgba(210,134,128,.28); }
.map-segment { position: absolute; left: 14px; top: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 4px 12px rgba(59,74,61,.11); }
.map-segment button { padding: 7px 10px; border-radius: 12px; font-size: 11px; color: #6b746d; }
.map-segment button.active { background: var(--green); color: white; }

.floating-summary { margin: -42px 14px 0; position: relative; z-index: 3; padding: 15px; border-radius: 18px; background: rgba(255,254,250,.97); box-shadow: var(--shadow); }
.summary-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.summary-title span { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 650; }
.summary-title strong { font-family: Georgia, serif; font-size: 18px; color: var(--green-dark); }
.progress-line { height: 5px; margin: 12px 0 13px; border-radius: 99px; background: #ece8df; overflow: hidden; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.summary-metrics, .detail-metrics, .profile-stats { display: grid; grid-template-columns: repeat(3,1fr); }
.metric { text-align: center; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 17px; color: var(--green-dark); white-space: nowrap; }
.metric span { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }

.section-block { padding: 18px 16px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 15px; font-weight: 650; }
.section-heading > span { font-size: 11px; color: var(--muted); }
.link-button { color: var(--green); font-size: 11px; }
.record-row { width: 100%; display: grid; grid-template-columns: 62px 1fr auto; gap: 11px; align-items: center; margin-top: 10px; padding: 9px; border-radius: 15px; background: var(--card); box-shadow: 0 3px 12px rgba(79,74,62,.06); text-align: left; }
.record-row img { width: 62px; height: 48px; border-radius: 10px; object-fit: cover; }
.record-row div { min-width: 0; }
.record-row strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-row span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.soft-pill { padding: 6px 9px; border-radius: 12px; background: var(--pink-soft); color: #b56f6b !important; margin: 0 !important; white-space: nowrap; }
.quote-card { display: flex; gap: 12px; margin: 18px 16px 0; padding: 14px; border-radius: 18px; background: #f5eee2; color: var(--green-dark); }
.quote-card div { display: flex; flex-direction: column; gap: 4px; }
.quote-card strong { font-family: Georgia, "Songti SC", serif; font-size: 14px; font-weight: 550; }
.quote-card span { font-size: 11px; color: #72786f; }

.bottom-nav { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: 74px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,254,250,.98); border-top: 1px solid var(--line); }
.bottom-nav { grid-template-columns: repeat(4,1fr); transition: transform .22s ease, opacity .22s ease; }
.bottom-nav.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.screen-content.focus-mode { padding-bottom: 0; }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #8a8e89; font-size: 10px; border-radius: 14px; }
.bottom-nav button.active { color: var(--green-dark); }
.bottom-nav button.active span { color: var(--pink); font-weight: 650; }

.toast { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 20px; background: #365640; color: white; font-size: 12px; box-shadow: var(--shadow); }

.record-form { padding-bottom: 18px; }
.form-hero { position: relative; height: 164px; }
.form-hero img { width: 100%; height: 100%; object-fit: cover; }
.camera-button { position: absolute; right: 14px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); }
.form-card { margin: 12px 14px 0; padding: 6px 14px 15px; border-radius: 18px; background: var(--card); box-shadow: 0 3px 13px rgba(80,73,60,.06); }
.field-row { min-height: 48px; display: grid; grid-template-columns: 92px 1fr; align-items: center; border-bottom: 1px solid var(--line); font-size: 13px; }
.field-row > span { color: #5e655f; }
.field-row input, .field-row select { width: 100%; padding: 9px 0; border: 0; outline: 0; background: transparent; text-align: right; color: #2f3831; }
.segmented { justify-self: end; display: flex; padding: 3px; border-radius: 12px; background: #f1eee8; }
.segmented button { min-width: 52px; padding: 7px 10px; border-radius: 9px; color: var(--muted); }
.segmented button.active { background: var(--pink); color: white; }
.block-label { display: block; margin: 13px 0 9px; font-size: 13px; color: #5e655f; }
.mood-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.mood-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; color: #8a8e89; font-size: 9px; }
.mood-grid button.active { background: var(--pink-soft); color: #b36f6a; }
.tag-picker { display:flex; flex-wrap:wrap; gap:8px; }
.tag-picker button { min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fbf8f1; color:#6f776f; font-size:12px; }
.tag-picker button.active { border-color:#d9aaa5; background:var(--pink-soft); color:#9e625d; }
textarea { width: 100%; min-height: 96px; padding: 12px; resize: none; outline: none; border: 1px solid var(--line); border-radius: 14px; background: #fdfbf7; font-size: 12px; line-height: 1.7; }
.text-count { margin-top: 5px; text-align: right; font-size: 9px; color: var(--muted); }
.photo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.photo-grid img, .photo-add { aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.photo-add { display: grid; place-items: center; border: 1px dashed #d7d0c5; background: #f6f1e8; color: var(--muted); }
.primary-button { width: calc(100% - 28px); min-height: 48px; margin: 16px 14px 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: var(--green-dark); color: white; box-shadow: 0 8px 18px rgba(63,96,72,.18); font-weight: 650; }
.mini-modal .primary-button { width: 100%; margin: 12px 0 0; }

.tab-strip { display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 14px 0; border-bottom: 1px solid var(--line); }
.tab-strip button { position: relative; padding: 12px 2px; font-size: 11px; color: var(--muted); }
.tab-strip button.active { color: var(--green-dark); font-weight: 650; }
.tab-strip button.active::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; background: var(--pink); border-radius: 2px; }
.plan-list { display: grid; gap: 10px; padding: 14px; }
.plan-card { position: relative; display: grid; grid-template-columns: 92px 1fr 28px; gap: 11px; min-height: 98px; padding: 10px; border-radius: 18px; background: var(--card); box-shadow: 0 3px 14px rgba(80,73,60,.06); }
.plan-card img { width: 92px; height: 78px; border-radius: 12px; object-fit: cover; }
.plan-copy { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.plan-copy strong { font-size: 13px; }
.plan-copy span { font-size: 11px; color: #616862; }
.plan-copy small { margin-top: auto; color: var(--muted); font-size: 9px; }
.more-button { align-self: start; width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); }
.status-badge { position: absolute; right: 10px; bottom: 10px; padding: 4px 7px; border-radius: 9px; background: #e4ecdf; color: #64805f; font-size: 9px; }
.status-badge.wish { background: var(--pink-soft); color: #ad6d67; }
.plan-note { display: flex; gap: 11px; align-items: center; margin: 4px 14px; padding: 15px; border-radius: 18px; background: #f6eee2; }
.plan-note div { display: flex; flex-direction: column; gap: 4px; }
.plan-note strong { font-family: Georgia, "Songti SC", serif; font-size: 14px; }
.plan-note span { font-size: 10px; color: var(--muted); }
.modal-backdrop { position: absolute; inset: 0; z-index: 80; display: grid; align-items: end; background: rgba(34,40,35,.32); }
.mini-modal { padding: 18px 16px 30px; border-radius: 24px 24px 0 0; background: var(--bg); }
.modal-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-heading button { width: 32px; height: 32px; display: grid; place-items: center; }
.mini-modal input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); outline: none; }

.data-page { padding-bottom: 12px; }
.data-hero { position: relative; height: 154px; margin: 12px 14px; overflow: hidden; border-radius: 19px; }
.data-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.8); }
.data-hero div { position: absolute; inset: 0; padding: 22px; display: flex; align-items: center; color: white; }
.data-hero strong { font-family: Georgia, "Songti SC", serif; font-size: 19px; line-height: 1.6; font-weight: 550; }
.stat-grid { margin: 0 14px; display: grid; grid-template-columns: repeat(3,1fr); row-gap: 18px; padding: 16px 8px; border-radius: 18px; background: var(--card); box-shadow: 0 3px 14px rgba(80,73,60,.06); }
.stat-grid .metric:nth-child(4) { border-left: 0; }
.chart-card, .distribution-card { margin: 12px 14px 0; padding: 15px; border-radius: 18px; background: var(--card); box-shadow: 0 3px 14px rgba(80,73,60,.06); }
.bar-chart { height: 132px; margin-top: 15px; display: flex; align-items: end; justify-content: space-between; gap: 4px; border-bottom: 1px solid var(--line); }
.bar-item { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 5px; }
.bar-item div { width: 12px; max-height: 96px; border-radius: 5px 5px 0 0; background: var(--green); opacity: .78; }
.bar-item span { font-size: 7px; color: var(--muted); }
.distribution-card img { width: 100%; height: 128px; margin-top: 12px; object-fit: cover; border-radius: 14px; filter: saturate(.66); }
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 9px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd7c7; }
.legend-dot.strong { background: var(--green); }

.profile-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 11px; margin: 14px; padding: 15px; border-radius: 19px; background: var(--card); box-shadow: 0 3px 14px rgba(80,73,60,.06); }
.avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); }
.profile-card strong { display: block; font-family: Georgia, "Songti SC", serif; }
.profile-card span { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); }
.level-chip { padding: 6px 8px; border-radius: 10px; background: var(--pink-soft); color: #aa6a65; font-size: 8px; white-space: nowrap; }
.profile-stats { margin: 0 14px; padding: 14px; border-radius: 18px; background: var(--card); }
.achievement-filter { margin-top: 8px; grid-template-columns: repeat(3,1fr); }
.achievement-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 14px; }
.achievement { min-height: 125px; display: flex; flex-direction: column; align-items: center; padding: 13px 6px; border-radius: 17px; background: var(--card); text-align: center; box-shadow: 0 3px 12px rgba(80,73,60,.05); }
.badge-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; background: #e8efe4; color: var(--green-dark); border: 1px solid #d3dfce; }
.achievement:nth-child(2n) .badge-icon { background: #edf0e8; }
.achievement:nth-child(3n) .badge-icon { background: #f1e6d2; color: #9a7749; }
.achievement strong { margin-top: 8px; font-size: 13px; }
.achievement span { margin-top: 4px; font-size: 11px; line-height:1.45; color: var(--muted); }
.achievement.locked { opacity: .68; filter: grayscale(.55); }

.home-story-grid { display:grid; gap:10px; padding:18px 14px 0; }
.next-plan-card,.memory-card { width:100%; min-height:118px; display:flex; flex-direction:column; align-items:flex-start; padding:17px; border-radius:20px; text-align:left; box-shadow:var(--shadow); }
.next-plan-card { color:#fff; background:linear-gradient(135deg,#486c50,#789177); }
.next-plan-card.empty { color:var(--green-dark); background:#e8efe3; }
.memory-card { color:#473d35; background:linear-gradient(135deg,#f2e5d2,#f7eee2); }
.eyebrow { font-size:11px; letter-spacing:.08em; opacity:.78; }
.next-plan-card strong,.memory-card strong { margin-top:8px; font-family:Georgia,"Songti SC",serif; font-size:20px; }
.next-plan-card small,.memory-card small { margin-top:7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; opacity:.84; }
.next-plan-card b,.memory-card b { margin-top:auto; padding-top:12px; font-size:12px; }
.insight-card,.season-card { margin:14px 14px 0; padding:17px; border-radius:20px; background:var(--card); box-shadow:0 3px 14px rgba(80,73,60,.06); }
.insight-card > strong { display:block; margin-top:8px; font-family:Georgia,"Songti SC",serif; font-size:17px; line-height:1.6; color:var(--green-dark); }
.insight-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.insight-stats > span { text-align:center; font:600 16px Georgia,serif; color:var(--green-dark); }
.insight-stats > span + span { border-left:1px solid var(--line); }
.insight-stats small { display:block; margin-top:5px; font:10px system-ui,sans-serif; color:var(--muted); }
.season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.season-grid div { min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px dashed #d8d1c5; border-radius:16px; color:var(--muted); background:#faf7f0; }
.season-grid div.lit { border-style:solid; border-color:#cedbc8; color:var(--green-dark); background:#e7efe3; }
.season-grid b { font-family:Georgia,"Songti SC",serif; font-size:18px; }
.season-grid span { font-size:10px; }
.compact-chart { margin-top:14px; }
.compact-chart .bar-chart { height:104px; }
.collection-heading { display:flex; justify-content:space-between; align-items:end; padding:20px 16px 0; }
.collection-heading h2 { margin:0; font-size:15px; }
.collection-heading span { font-size:11px; color:var(--muted); }

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(217,146,141,.5); outline-offset:2px; }
button { min-height:44px; }
.bottom-nav button,.map-segment button,.mood-grid button { min-height:44px; }

.detail-overlay { position: absolute; inset: 0; z-index: 90; background: rgba(34,40,35,.3); display: flex; align-items: flex-end; }
.detail-sheet { width: 100%; max-height: 94%; overflow-y: auto; border-radius: 28px 28px 0 0; background: var(--bg); }
.detail-hero { height: 240px; position: relative; overflow: hidden; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.back-button, .heart-button { position: absolute; top: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); }
.back-button { left: 15px; }
.heart-button { right: 15px; color: var(--pink); }
.hero-copy { position: absolute; left: 18px; right: 18px; bottom: 18px; color: white; text-shadow: 0 2px 8px rgba(0,0,0,.28); }
.hero-copy h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 550; }
.hero-copy span { display: block; margin-top: 6px; font-size: 11px; }
.detail-body { padding: 16px; }
.detail-metrics { padding: 12px 4px 16px; }
.state-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.state-grid button { min-height: 67px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 7px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: var(--card); }
.state-grid button svg { grid-row: 1 / 3; }
.state-grid button.selected { background: var(--pink-soft); border-color: #efd0cc; color: #aa6b66; }
.state-grid span { font-size: 12px; font-weight: 650; }
.state-grid small { font-size: 8px; color: var(--muted); }
.detail-section { margin-top: 18px; }
.detail-section h2 { margin: 0 0 8px; font-size: 14px; }
.detail-section p { margin: 0; font-size: 11px; line-height: 1.8; color: #666e68; }
.mini-record { display: grid; grid-template-columns: 54px 1fr 18px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mini-record img { width: 54px; height: 42px; border-radius: 9px; object-fit: cover; }
.mini-record strong { display: block; font-size: 11px; }
.mini-record span { display: block; margin-top: 4px; font-size: 9px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 520px) {
  body { background: var(--bg); }
  .site-shell { min-height: 100dvh; padding: 0; display: block; background: var(--bg); }
  .phone-app { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
}
.status-safe { display:flex; align-items:center; justify-content:space-between; padding:0 22px; font-size:10px; color:#616862; }
.cloud-guest-active .status-safe{color:#a36d68;background:#fff4f1;font-weight:650;}
.bottom-nav img { width:24px; height:24px; object-fit:cover; filter:grayscale(1) opacity(.65); mix-blend-mode:multiply; }
.bottom-nav button.active img { filter:none; }
.map-tool { font-size:9px; color:#4c5f51; }
.map-add { font-size:29px; line-height:1; }
.summary-title small { color:#82917e; font-size:10px; }
.quote-mark { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:#e1eadc; color:#47624d; font-family:"Songti SC",serif; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.camera-button { font-size:10px; color:#3f6048; }
.mood-grid button > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#f2eee6; font-family:Georgia,serif; }
.mood-grid button.active > span { background:#eab7b2; color:white; }
.mood-grid button small { font-size:9px; }
.photo-add { font-size:24px; }
.round-add { font-size:22px; }
.more-button { font-size:8px; }
.empty-state { padding:42px 22px; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; }
.badge-icon { overflow:hidden; background:#f4f0e7; }
.badge-icon img { width:100%; height:100%; object-fit:cover; }
.detail-sheet { scrollbar-width:none; }
.back-button,.heart-button { width:auto; min-width:42px; padding:0 10px; font-size:10px; }
.state-grid button { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.state-grid small { margin-top:4px; }
.mini-record b { font-size:22px; font-weight:400; color:var(--muted); }
.mini-record div { min-width:0; }
.settings-copy { font-size:12px; line-height:1.8; color:#687069; }
.secondary-button,.danger-button { width:100%; min-height:45px; margin-top:10px; border-radius:14px; font-weight:650; }
.secondary-button { background:#e1eadc; color:#3f6048; }
.danger-button { background:#f4dfdc; color:#a45f5a; }
.mini-modal label { display:block; margin-top:12px; font-size:12px; color:#5d665f; }
.mini-modal label input { margin-top:7px; }
@media (max-width:520px){.status-safe{height:env(safe-area-inset-top,18px);min-height:18px}.screen-content{height:calc(100% - max(18px,env(safe-area-inset-top)));}}
.topbar { display:flex; grid-template-columns:none; }
.topbar .topbar-side, .topbar > div { width:84px; flex:0 0 84px; display:flex; align-items:center; }
.topbar .topbar-right, .topbar > div:last-child { justify-content:flex-end; }
.topbar > strong { flex:1 1 auto; text-align:center; }
.map-segment { display:grid; grid-template-columns:repeat(3,auto); }
.map-segment button { appearance:none; width:auto; min-width:38px; }
.image-icon img { width:100%; height:100%; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; }
.map-tool.image-icon { padding:0; overflow:hidden; }
.map-add.image-icon { padding:0; overflow:hidden; background:transparent; box-shadow:none; }
.bottom-nav { width:100%; }
.bottom-nav button { min-width:0; }


/* 空白正式版 */
.map-empty {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 44%;
  z-index: 5;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.93);
  box-shadow: 0 10px 30px rgba(50, 75, 58, 0.14);
  text-align: center;
  backdrop-filter: blur(8px);
}
.map-empty strong { display: block; color: #385742; font-size: 15px; margin-bottom: 4px; }
.map-empty span { color: #7d847d; font-size: 12px; line-height: 1.5; }
.empty-state.compact { padding: 20px 12px; }
.photo-grid.empty-photos { grid-template-columns: 1fr; }
.photo-grid.empty-photos .photo-add { width: 100%; min-height: 76px; }

/* v3 交互优化 */
.topbar .round-add.small { width: 34px; height: 34px; font-size: 20px; }
.simple-map { height: 338px; }
.simple-map .map-segment { top: 16px; left: 16px; }
.summary-note { margin: -7px 0 11px; text-align: right; color: var(--muted); font-size: 9px; }
.metric-button { width: 100%; padding: 0; }
.metric-button:active strong { color: var(--pink); }
.soft-pill.neutral { background: #eeece6; color: #777d78 !important; }
.map-empty button { margin-top: 10px; padding: 9px 14px; border-radius: 14px; background: var(--green-dark); color: white; font-size: 11px; }

.summit-mini-list { display: grid; gap: 8px; margin-top: 10px; }
.summit-mini-card { width: 100%; display: grid; grid-template-columns: 58px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 8px; border-radius: 15px; background: var(--card); box-shadow: 0 3px 12px rgba(79,74,62,.05); text-align: left; }
.summit-mini-card img { width: 58px; height: 46px; border-radius: 10px; object-fit: cover; }
.summit-mini-card div { min-width: 0; }
.summit-mini-card strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summit-mini-card span { display: block; margin-top: 5px; font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summit-mini-card b { color: var(--muted); font-size: 18px; font-weight: 400; }

.record-filter { grid-template-columns: repeat(3, 1fr); }
.record-history { display: grid; gap: 10px; padding: 14px; }
.record-list-card { position: relative; border-radius: 18px; background: var(--card); box-shadow: 0 3px 14px rgba(80,73,60,.06); overflow: hidden; }
.record-card-main { width: 100%; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 11px; padding: 10px 10px 34px; text-align: left; }
.record-card-main > img { width: 92px; height: 86px; border-radius: 12px; object-fit: cover; }
.record-card-copy { min-width: 0; }
.record-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-card-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.record-card-title .soft-pill { flex: 0 0 auto; font-size: 8px; }
.record-card-copy > span { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.record-card-copy p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #687069; font-size: 10px; line-height: 1.55; }
.record-edit-button { position: absolute; right: 10px; bottom: 7px; padding: 5px 10px; border-radius: 10px; background: #f2eee7; color: #6f756f; font-size: 9px; }
.record-empty strong, .empty-state strong { display: block; margin-bottom: 5px; color: #4f5c52; font-size: 14px; }
.record-empty span, .empty-state > span { display: block; }
.inline-cta { width: auto; min-height: 40px; margin: 14px auto 0; padding: 0 20px; }

.field-row > span b { color: var(--pink); font-weight: 500; }
.field-row input[type="date"] { min-height: 42px; }
.form-tip { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f1e8; color: var(--muted); font-size: 9px; line-height: 1.6; }
.form-actions { padding-bottom: 8px; }
.danger-text-button { width: calc(100% - 28px); min-height: 42px; margin: 8px 14px 0; border-radius: 14px; color: #ad6862; background: #f7e9e6; font-size: 11px; }

.plan-filter { grid-template-columns: repeat(4, 1fr); }
.plan-card.expanded { grid-template-columns: 82px minmax(0,1fr) 34px; min-height: 136px; padding-bottom: 43px; }
.plan-card.expanded > img { width: 82px; height: 76px; }
.plan-card.expanded .status-badge { bottom: 11px; left: 10px; right: auto; }
.status-badge.done { background: #dde9df; color: #55735c; }
.plan-action { position: absolute; right: 10px; bottom: 8px; min-width: 104px; padding: 8px 11px; border-radius: 12px; background: var(--green-dark); color: white; font-size: 9px; }
.plan-modal { max-height: 88%; overflow-y: auto; }
.plan-modal select { width: 100%; margin-top: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); outline: none; }

.clickable-stats .metric-button { min-height: 52px; }
.distribution-card .summit-mini-list { margin-top: 12px; }

.settings-button { width: auto; padding: 0 5px; font-size: 11px; color: var(--muted); }
.achievement { border: 0; color: inherit; }
.achievement i { width: 76%; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #ebe7df; }
.achievement i b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.achievement small { margin-top: 4px; color: var(--muted); font-size: 7px; }

.detail-status { padding: 13px 14px; border-radius: 15px; background: #f0eee8; }
.detail-status.summited { background: var(--pink-soft); }
.detail-status strong { display: block; font-size: 12px; color: #566159; }
.detail-status span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.detail-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; margin-top: 12px; }
.detail-actions .primary-button, .detail-actions .secondary-button { width: 100%; min-height: 44px; margin: 0; }
.mini-record { width: 100%; background: transparent; text-align: left; }

.list-modal { width: 100%; max-height: 84%; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--bg); }
.list-modal .modal-heading > div { min-width: 0; }
.list-modal .modal-heading strong { display: block; }
.list-modal .modal-heading span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.summit-full-list { display: grid; gap: 8px; }
.summit-full-list > button { display: grid; grid-template-columns: 68px minmax(0,1fr) 16px; gap: 11px; align-items: center; width: 100%; padding: 9px; border-radius: 15px; background: var(--card); text-align: left; box-shadow: 0 3px 12px rgba(80,73,60,.05); }
.summit-full-list img { width: 68px; height: 54px; border-radius: 10px; object-fit: cover; }
.summit-full-list div { min-width: 0; }
.summit-full-list strong, .summit-full-list span, .summit-full-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summit-full-list strong { font-size: 12px; }
.summit-full-list span { margin-top: 4px; color: #69716b; font-size: 9px; }
.summit-full-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.summit-full-list b { color: var(--muted); font-size: 18px; font-weight: 400; }

.region-options { display: grid; gap: 8px; }
.region-options button { padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: var(--card); }
.region-options button.active { border-color: #bdcdbb; background: var(--green-soft); }
.region-options strong { display: block; font-size: 12px; }
.region-options span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }

.achievement-modal { position: relative; width: calc(100% - 36px); margin: auto auto 22%; padding: 24px 18px; border-radius: 24px; background: var(--bg); text-align: center; }
.achievement-modal > button { position: absolute; top: 12px; right: 12px; color: var(--muted); font-size: 10px; }
.achievement-modal > img { width: 88px; height: 88px; margin: 4px auto 10px; object-fit: cover; }
.achievement-modal > strong { display: block; font-family: Georgia, "Songti SC", serif; font-size: 18px; }
.achievement-modal > span { display: block; margin-top: 6px; color: #687069; font-size: 11px; }
.achievement-modal > small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.achievement-big-progress { height: 6px; margin: 16px 24px 0; overflow: hidden; border-radius: 99px; background: #ebe7df; }
.achievement-big-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }

.import-button { display: flex; align-items: center; justify-content: center; cursor: pointer; }

@media (max-width: 360px) {
  .profile-card { grid-template-columns: 44px 1fr; }
  .profile-card .level-chip { grid-column: 1 / -1; justify-self: start; }
  .record-card-main { grid-template-columns: 78px minmax(0,1fr); }
  .record-card-main > img { width: 78px; }
}
.modal-heading button { width: auto; min-width: 44px; padding: 0 6px; white-space: nowrap; }

/* v4 可点击数据入口提示 */
.metric-button span::after { content: '  ›'; color: var(--pink); font-weight: 700; }
.metric-button { cursor: pointer; }

.cloud-auth-active .status-safe,.cloud-auth-active .bottom-nav{display:none;}
.cloud-auth-active .screen-content{display:grid;place-items:center;min-height:100%;padding:22px 16px;}
.cloud-auth-card{width:100%;padding:28px 22px;border-radius:26px;background:var(--card);box-shadow:0 16px 50px rgba(91,78,62,.13);text-align:center;}
.cloud-auth-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(145deg,var(--green-soft),var(--pink-soft));color:var(--green-dark);font-family:Georgia,"Songti SC",serif;font-size:29px;font-weight:700;}
.cloud-auth-kicker{margin:0;color:var(--pink);font-size:10px;letter-spacing:.16em;}.cloud-auth-card h1{margin:7px 0 10px;font-family:Georgia,"Songti SC",serif;font-size:25px;}.cloud-auth-copy{margin:0 auto 20px;color:var(--muted);font-size:11px;line-height:1.7;}
.cloud-auth-form{display:grid;gap:12px;text-align:left;}.cloud-auth-form label{color:var(--muted);font-size:10px;}.cloud-auth-form input{width:100%;margin-top:6px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--bg);color:var(--text);font-size:12px;outline:none;}
.cloud-auth-primary,.cloud-auth-secondary,.cloud-auth-guest{width:100%;min-height:46px;border:0;border-radius:15px;font-size:11px;}.cloud-auth-primary{background:var(--green-dark);color:white;}.cloud-auth-secondary{background:var(--green-soft);color:var(--green-dark);}.cloud-auth-guest{background:var(--pink-soft);color:#9c625e;font-weight:650;border:1px solid #ebcbc7;}.cloud-auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:9px;}.cloud-auth-divider:before,.cloud-auth-divider:after{content:"";height:1px;flex:1;background:var(--line);}
.cloud-auth-message{min-height:18px;margin:14px 0 6px;color:var(--green-dark);font-size:10px;line-height:1.5;}.cloud-auth-message.error{color:#ad6862;}.cloud-auth-card>small{display:block;color:var(--muted);font-size:8px;line-height:1.6;}