.page {
  min-height:100vh;
  background:var(--color-primary-lighter);
}

.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32rpx;
  background:var(--color-bg-card);
  border-bottom:1rpx solid var(--color-divider);
}

.title {
  font-size:36rpx;
  font-weight:bold;
  color:var(--color-text-strong);
}

.unread-badge {
  font-size:24rpx;
  color:var(--color-primary-strong);
  padding:8rpx 16rpx;
  background:var(--color-primary-light);
  border-radius:20rpx;
}

.unread-badge.empty {
  color:var(--color-text-tertiary);
  background:var(--color-bg-subtle);
}

.list {
  height:calc(100vh - 120rpx);
}

.notif-item {
  display:flex;
  align-items:flex-start;
  padding:28rpx 32rpx;
  background:var(--color-bg-card);
  border-bottom:1rpx solid var(--color-divider);
  gap:16rpx;
}

.notif-item.unread {
  background:var(--color-primary-lighter);
}

.notif-dot {
  width:12rpx;
  height:12rpx;
  border-radius:50%;
  background:var(--color-primary);
  flex-shrink:0;
  margin-top:12rpx;
}

.notif-content {
  flex:1;
  min-width:0;
}

.notif-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8rpx;
}

.notif-title {
  font-size:28rpx;
  font-weight:bold;
  color:var(--color-text-strong);
}

.notif-time {
  font-size:24rpx;
  color:var(--color-text-tertiary);
}

.notif-body {
  font-size:24rpx;
  color:var(--color-text-secondary);
  line-height:1.6;
  margin-bottom:12rpx;
}

.notif-type-tag {
  display:inline-block;
  font-size:24rpx;
  padding:4rpx 12rpx;
  border-radius:12rpx;
  background:var(--color-bg-subtle);
  color:var(--color-text-tertiary);
}

.notif-type-tag.match { background:var(--color-success-light); color:var(--color-success-strong); }
.notif-type-tag.review { background:var(--color-info-light); color:var(--color-info-strong); }
.notif-type-tag.activity { background:var(--color-warning-light); color:var(--color-warning-strong); }
.notif-type-tag.risk { background:var(--color-primary-light); color:var(--color-danger-strong); }
.notif-type-tag.account { background:var(--color-accent-purple-light); color:var(--color-accent-purple-strong); }

.empty {
  text-align:center;
  padding:120rpx 40rpx;
}

.empty-img {
  width:160rpx;
  height:160rpx;
  margin-bottom:24rpx;
  opacity:0.5;
}

.empty-text {
  display:block;
  font-size:28rpx;
  color:var(--color-text-tertiary);
}

.loading {
  text-align:center;
  padding:40rpx;
  color:var(--color-text-tertiary);
}