.page { min-height: 100vh; background: linear-gradient(180deg, #fff8f2 0%, #f5f0ff 100%); }
.nav { display: flex; align-items: center; padding: 14rpx 28rpx; gap: 16rpx; }
.nav-back { font-size: 60rpx; color: #272235; font-weight: 300; line-height: 1; }
.nav-title { flex: 1; font-size: 32rpx; font-weight: 900; color: #272235; text-align: center; }
.nav-right { font-size: 26rpx; color: #9b8fa8; }
.empty { display: flex; flex-direction: column; align-items: center; padding: 120rpx 60rpx; gap: 20rpx; }
.empty-emoji { font-size: 80rpx; }
.empty-tip { font-size: 28rpx; color: #9b8fa8; }
.notify-item { display: flex; align-items: center; gap: 20rpx; padding: 22rpx 28rpx; background: rgba(255,255,255,0.80); border-bottom: 1rpx solid rgba(43,37,61,0.05); }
.notify-item.unread { background: rgba(255,229,240,0.40); }
.n-avatar { width: 80rpx; height: 80rpx; border-radius: 26rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 800; color: rgba(39,34,53,0.72); flex-shrink: 0; }
.n-body { flex: 1; }
.n-text { display: block; font-size: 28rpx; color: #272235; line-height: 1.5; }
.n-time { display: block; font-size: 22rpx; color: #9b8fa8; margin-top: 6rpx; }
.unread-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: #ff4f91; flex-shrink: 0; }