.page { min-height: 100vh; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); }

.head { text-align: center; padding: 32rpx; border-bottom: 1rpx solid var(--line); }
.head-num { font-size: 60rpx; font-weight: 600; font-variant-numeric: tabular-nums; }
.head-total { font-size: 32rpx; color: var(--ink-2); }
.head-sub { font-size: 22rpx; color: var(--ink-2); margin-top: 4rpx; }

.section { font-size: 24rpx; color: var(--ink-2); padding: 24rpx 32rpx 8rpx; }
.list { padding: 0 32rpx; display: flex; flex-direction: column; gap: 16rpx; }

.ach-row { display: flex; align-items: center; gap: 22rpx; padding: 22rpx 24rpx; }
.ach-row.locked { opacity: 0.6; }
.medal { width: 84rpx; height: 84rpx; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: var(--icon-size); line-height: 1; flex-shrink: 0; }
.medal.on { background: var(--accent-soft); }
.ach-body { flex: 1; }
.ach-name { font-size: 26rpx; font-weight: 600; }
.ach-desc { font-size: 22rpx; color: var(--ink-2); margin-top: 4rpx; }
.ach-when { font-size: 22rpx; color: var(--ink-2); }