.page { min-height: 100vh; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); position: relative; }
.close { position: absolute; top: 24rpx; right: 32rpx; font-size: 36rpx; color: var(--ink-3); z-index: 2; }

.hero { text-align: center; padding: 40rpx 32rpx 24rpx; border-bottom: 1rpx solid var(--line); }
.hero-avatar { width: 116rpx; height: 116rpx; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 56rpx; margin: 0 auto 16rpx; }
.hero-headline { font-size: 30rpx; font-weight: 600; }
.hero-big { margin-top: 8rpx; }
.big-v { font-size: 72rpx; font-weight: 600; font-variant-numeric: tabular-nums; }
.big-u { font-size: 30rpx; color: var(--ink-2); }

.grid3 { display: flex; padding: 28rpx 12rpx; }
.g { flex: 1; text-align: center; }
.g-v { font-size: 36rpx; font-weight: 600; }
.g-v.streak { color: var(--success); }
.g-k { font-size: 22rpx; color: var(--ink-2); margin-top: 4rpx; }

.ach-banner { display: flex; align-items: center; gap: 18rpx; margin: 0 32rpx 20rpx; padding: 22rpx 24rpx; background: var(--accent-soft); border-radius: var(--radius-sm); }
.ach-medal { font-size: var(--icon-size); line-height: 1; }
.ach-name { font-size: 26rpx; font-weight: 600; color: var(--accent-deep); }

.section { font-size: 24rpx; color: var(--ink-2); padding: 24rpx 32rpx 8rpx; }
.note-row { display: flex; align-items: center; gap: 16rpx; padding: 0 32rpx 16rpx; }
.photo-add { width: 128rpx; height: 128rpx; border-radius: 24rpx; border: 1rpx dashed var(--line-2); display: flex; align-items: center; justify-content: center; font-size: var(--icon-size); color: var(--ink-3); overflow: hidden; line-height: 1; }
.photo-thumb { width: 128rpx; height: 128rpx; }
.share-canvas { position: fixed; left: -9999rpx; top: 0; width: 600px; height: 820px; }
.note-input { flex: 1; height: var(--input-height); min-height: var(--input-height); background: var(--surface-2); border-radius: var(--input-radius); padding: var(--input-padding-y) var(--input-padding-x); font-size: var(--input-font-size); line-height: 1.4; }

.field { padding: 22rpx 32rpx; border-top: 1rpx solid var(--line); }
.flabel { font-size: var(--form-label-size); color: var(--ink-2); margin-bottom: 12rpx; }
.chips { display: flex; flex-wrap: wrap; gap: 16rpx; }
.chip { font-size: var(--chip-font-size); padding: var(--chip-padding-y) var(--chip-padding-x); border-radius: var(--radius-pill); border: 1rpx solid var(--line-2); background: var(--surface-2); line-height: 1.4; }
.chip.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600; }

.actions { display: flex; flex-direction: column; gap: 20rpx; padding: 36rpx 32rpx 0; }