.page { min-height: 100vh; background: var(--bg-grad); padding-bottom: 160rpx; }
.header { padding: 32rpx; border-bottom: 1rpx solid var(--line); }
.header__emoji {
  width: 120rpx; height: 120rpx; border-radius: 28rpx;
  display: flex; align-items: center; justify-content: center; font-size: 64rpx;
}
.header__name { font-size: 44rpx; font-weight: 700; margin-top: 20rpx; }
.header__en { font-size: 24rpx; color: var(--text-3); margin-top: 6rpx; letter-spacing: 1rpx; }
.header__desc { font-size: 26rpx; color: var(--text-2); margin-top: 12rpx; line-height: 1.5; }
.header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12rpx; margin-top: 20rpx; }
.header__sep { color: var(--text-3); font-size: 22rpx; }
.header__m { font-size: 24rpx; color: var(--text-2); }

.grid { display: flex; flex-wrap: wrap; gap: 18rpx; }
.grid__item { width: calc((100% - 18rpx) / 2); }
.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 120rpx 0; }
.empty-page { min-height: 100vh; background: var(--bg-grad); }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 20rpx; padding: 20rpx 32rpx;
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  border-top: 1rpx solid var(--line);
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 999rpx; padding: 26rpx; font-size: 30rpx; font-weight: 700;
}
.btn--gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%); color: var(--accent-on); }
.btn--ghost { background: var(--surface-2); color: var(--text); border: 1rpx solid var(--gold-line); }
.btn--faved { color: var(--gold-2); border-color: var(--gold); }