.ui-rec { background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--spacing-4); margin-bottom: var(--spacing-3); box-shadow: var(--shadow-card); } .ui-rec__header { display: flex; align-items: flex-start; position: relative; } .ui-rec__info { flex: 1; min-width: 0; margin-left: var(--spacing-3); } .ui-rec__name-row { display: flex; align-items: baseline; margin-bottom: var(--spacing-1); } .ui-rec__name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-right: var(--spacing-2); } .ui-rec__age { font-size: var(--font-size-md); color: var(--color-text-tertiary); } .ui-rec__meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin-top: 4rpx; } .ui-rec__photo-count { margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--color-primary); } .ui-rec__level { position: absolute; top: 0; right: 0; padding: 6rpx 14rpx; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .ui-rec__level--high { background: var(--color-success-light); color: var(--color-success); } .ui-rec__level--medium { background: var(--color-info-light); color: var(--color-info); } .ui-rec__level--normal { background: var(--color-warning-light); color: var(--color-warning); } .ui-rec__reasons { margin-top: var(--spacing-3); padding: var(--spacing-3); background: var(--color-primary-light); border-radius: var(--radius-md); } .ui-rec__reasons-title { font-size: var(--font-size-sm); color: var(--color-primary); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-2); } .ui-rec__reason { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } .ui-rec__intro { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1rpx solid var(--color-divider); font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .ui-rec__actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-4); } .ui-rec__btn-pass { flex: 1; } .ui-rec__btn-like { flex: 2; } .ui-rec__more { margin-top: var(--spacing-3); text-align: center; } .ui-rec__more .ui-rec__more-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); padding: var(--spacing-1) var(--spacing-2); }